• form表单提交且接口回调显示提交成功


    前端:
    <form method="post" enctype="multipart/form-data" id="formSubmit">
          <div class="row">
               <div class="col-lg-12" style="padding-left:25px;padding-top: 5px">
                    <label>请选择文件</label>
                    <input type="file" name="file" title="点击选择文件" multiple="" accept="*/*" class="form-control">
               </div>
          </div>
          <div class="row">
               <div style="padding-left:25px;padding-top:10px">
                    <input type="submit" class="btn btn-primary">
               </div>
          </div>
    </form>
    JS:
    $('#formSubmit').submit(function (event) {
            //首先验证文件格式
            var fileName = $(this).find("input[name=file]").val();
            if (fileName === '') {
                alert('请选择文件');
                return;
            }
            // mulitipart form,如文件上传类
            var formData = new FormData(this);
            $.ajax({
                async: false,
                type: "POST",
                url: "/upload",
                data: formData,
                dataType: "JSON",
                mimeType: "multipart/form-data",
                contentType: false,
                cache: false,
                processData: false,
                success: function (data) {
                    if (data.success) {
                        layer.alert("上传成功")
                    } else {
                        layer.alert(data.error)
                    }
                }
            });
            return false;
        });
    

      js代码的最后需要return false 防止表单重复提交,刷新页面。

    java:
     @RequestMapping(value = "/upload", method = RequestMethod.POST, produces = "application/json;charset=utf-8")
        @ResponseBody
        public SimpleAjaxResponse uploadSingleFile(HttpServletRequest request, Model model) {
            try {
                DefaultMultipartHttpServletRequest httpServletRequest = (DefaultMultipartHttpServletRequest) request;
                MultipartFile multipartFile = httpServletRequest.getFile("file");
                return new SimpleAjaxResponse(true);
            } catch (Exception e) {
                LOGGER.error(e.getMessage(), e);
                e.printStackTrace();
                return new SimpleAjaxResponse("上传出错了");
            }
    
        }
    

      

    当你的才华还撑不起你的野心时
    那你就应该静下心来学习
    当你的能力还驾驭不了你的目标时
    那就应该沉下心来历练
  • 相关阅读:
    Python基础之基本数据类型
    Python基础之变量
    mysql数据库
    进程与线程
    并发编程
    网络编程
    内置函数(魔法方法)
    组合,封装,访问限制机制,property装饰器
    面向对象之继承
    Web开发中最致命的8个小错误
  • 原文地址:https://www.cnblogs.com/yang-xiansen/p/11205861.html
Copyright © 2020-2023  润新知