异步上传文件

开发过程中,一个页面中有多个tab页,如果使用表单提交的方式上传文件,到把整个页面都刷新掉,需要采用异步上传的方式,达到局部刷新的目的,不多说了,贴代码:

jquery代码

var formData =new FormData($("#whiteCustomerImportForm" )[0]);

$.ajax({

    url:"${ctx}/whitecustomer/wsxdWhiteCustomer/import",

    type:"POST",

    data:formData,

    /**

    *必须false才会自动加上正确的Content-Type

    */

      contentType:false,

    /**

    * 必须false才会避开jQuery对 formdata 的默认处理

    * XMLHttpRequest会对 formdata 进行正确的处理

    */

      processData:false,

    dataType:'json',

    success:function (data) {

    alert(11111111)

    },

    error:function () {

    alert("上传失败!");

    }

});

页面

<div id="whiteCustomerImportBox" class="hide">

    <form id="whiteCustomerImportForm" action="${ctx}/whitecustomer/wsxdWhiteCustomer/import" method="post"

            enctype="multipart/form-data"

            class="form-search" style="padding-left:20px;text-align:center;" ><br/>

    <input id="uploadFile" name="file" type="file" style="width:330px"/><br/><br/>

    <input id="btnBatchRemindImportSubmit" class="btn btn-primary" type="button" onclick="batchImportWhiteCustomer()" value="批量更新"/>

    <a href="${ctx}/whitecustomer/wsxdWhiteCustomer/download/whiteCustomerImportTemplate" class="button-bar">下载模板</a>

    </form>

</div>


后台

@RequestMapping(value ="import", method = RequestMethod.POST)

@ResponseBody

public Map remindImport(@RequestParam("file") MultipartFile file, Model model) {

    return Maps.newHashMap();

}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容