zoukankan      html  css  js  c++  java
  • 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("上传出错了");
            }
    
        }
    

      

    当你的才华还撑不起你的野心时
    那你就应该静下心来学习
    当你的能力还驾驭不了你的目标时
    那就应该沉下心来历练
  • 相关阅读:
    mysql中的几种join 及 full join问题
    MySQL基础练习题
    SQL之IFNULL()
    SQL之查找表中字段的值相同的记录
    Mysql之将一张表内容导入另一张表中
    selenium无界面操作浏览器与Chrome Options的启动项设置
    SQL UNION 和 UNION ALL 操作符
    Python断言方法assert
    Python标准库--contextlib模块
    Python标准库--itertools模块
  • 原文地址:https://www.cnblogs.com/yang-xiansen/p/11205861.html
Copyright © 2011-2022 走看看