SpringMVC

来源：互联网发布：网络高峰期编辑：程序博客网时间：2024/06/16 14:40

案例背景：同时上传两个不同name文件，使用ajax方式，上传后进行状态处理(函数回调)。

如果不考虑上传后的状态，或者仅仅提示上传结果。那么可以直接只用form 表单 submit方式。同样可以实现多个文件上传。

如果使用同name上传，那么input标签有multiple属性，可以上传多个文件。表单如下：

<form action="upload.do" method="post" enctype="multipart/form-data">       <input type="text" name="desc" value=""/><br/>        <input type="file" name="files" multiple/><br/>        <input type="submit" value="Submit"/></form>

如果不使用multiple属性，那么就需要写多个文件域，这显然是不可取的。表单如下：

<form action="upload.do" method="post" enctype="multipart/form-data">      <input type="text" name="desc" value=""/><br/>       <input type="file" name="files" /><br/>       <input type="file" name="files" /><br/>      <input type="submit" value="Submit"/></form>

后台接收方法如下(使用数组接收)：

    @RequestMapping(value="/upload.do")    public String fileUpload(@RequestParam("files") MultipartFile[] files,HttpServletRequest request) {    //...    }

如上所述，submit方式的弊端在于文件上传中，无法有效捕获文件上传状态及进行的后续处理！

故，采用ajax方式(你可以使用ajax upload 插件)，本文使用formdata方式。

【FormData】

通过FormData对象可以组装一组用 XMLHttpRequest发送请求的键/值对。它可以更灵活方便的发送表单数据，因为可以独立于表单使用。

如果你把表单的编码类型设置为multipart/form-data ，则通过FormData传输的数据格式和表单通过submit() 方法传输的数据格式相同

即，此时使用FormData对象传送的数据不会发送格式改变！！！

表单示例如下：

    <form id="myform" name="myform" action="<%=basePath%>data/saveDataImport.do" class="layui-form"  method="post" enctype="multipart/form-data" >        <div  class="layui-form-item">        <label class="layui-form-label">请选择POS表：</label>        <div class="layui-input-block">          <input id="pos" type="file" name="pos"  >        </div>        </div>        <div  class="layui-form-item" >        <label class="layui-form-label">请选择商品表：</label>        <div class="layui-input-block">          <input id="goods" type="file" name="goods"  >        </div>        </div>        <div class="layui-form-item" style="margin-top: 40px;">        <div class="layui-input-block">          <button  id = "upload" class="layui-btn" type="button">确定</button>          <button name="cancel"  type="button" class="layui-btn" onclick="f_cancel();">取消</button>        </div>      </div></form>

构建FormData对象：

下面两种正确方式：

 var posFormData = new FormData($("#myform")[0]); or  var posFormData = new FormData($("form")[0]);

参数对比如下图：

这里写图片描述

【FormData】如下图：

这里写图片描述

JS如下：

$(function(){      $("#upload").click(function(){          var posFormData = new FormData($("#myform")[0]);          $.ajax({                    url: url,                    type: 'POST',                    data: posFormData,                    contentType: false, //禁止设置请求类型                    processData: false, //禁止jquery对DAta数据的处理,默认会处理                    beforeSend: function(){                        //返回的参数item，即为当前的input DOM对象                        index = layer.load(1,{shade: [0.3,'grey']});                    },                    success: function(data) {                         if (typeof data != "object") {                            jsonReturn = eval("("+data+")");                          }else{                              jsonReturn=data;                          }                           //关闭遮罩层                           layer.close(index);                          if(jsonReturn.code == "true"){                             layer.msg(jsonReturn.message,{icon:1,time: 1000},function(){                                f_cancel();                                top.f_getframe("goods_index_do").f_goods_sale_query();                             });                          }else{                             layer.msg(jsonReturn.message,{icon: 7,time: 2000});                          }                    }          });      });  });

上传参数如下图：

这里写图片描述

使用submit方式上传文件参数如下图：

这里写图片描述

对比发现，二者数据格式完全一致！！！

后台接收方法如下：

@RequestMapping(value="saveDataImport",produces="application/json;charset=utf-8" )    @ResponseBody    public String saveDataImport(@RequestParam(value="pos",required=false)MultipartFile posFile,@RequestParam(value="goods",required=false)MultipartFile goodsFile){    //...}

阅读全文

1 0