jQuery ajax 上传文件

应用场景介绍

页面有一个【导入模板】的按钮，导入一个excel提交给后台做文件解析，并把结果返回给前端展示，再点击【确定按钮】再提交文件给后台接口。
前端借助layui的upload 和 ajax完成。

代码实战

在layui#upload的上传文件成功后的done的方法里展示文件解析出的内容，保存file。点击【提交】按钮之后，用ajax上传文件。

layui.use(['form','upload'],function(){
	var upload = layui.upload;
	form = layui.form;
//上传模板并解析显示到页面上
upload.render({
    elem: '#importExcel'
    , url: '/upload/buildTpl' //导入模板
    , accept: 'file' //只接受excel类型
    , size: 0 //不限制大小
    , done: function (res, index, upload) { //上传后的回调
           if (res.code == "0") {
              layer.msg('文件解析成功');       
            } else {
               layer.msg(res.msg);
               //清空file
                excelFile = null;
            }
         }
        , choose: function (obj) {
           //展示文件名
           obj.preview(function (index, file, result) {
             //上传的文件名显示到页面
             $('#tplFileName').html('【' + file.name + '】');
              //模板文件记录到变量
              excelFile = file;
            });
          }
        });
});

//点击提交
form.on('submit(submitBtn)',function(data){
var formData = new FormData();
formData.append('file',excelFile);//文件对象
$.ajax({
   url: "/apktool/chgApkInfo",
   data: formData,
   type: "post", //要以post方式提交
   //默认为true,会把参数序列化，上传文件不需要序列化
   processData: false,
   contentType: false, //不需要指定contentType
   success: function (result) {
     //上传成功后的回调
   },
   error: function(){
     //出现异常
   }
});

需要注意的是[processData]是jQuery独有的属性。
序列化的意思就是把[data]对应的表单数据，
{key1:value1,key2:value2} 这种对象转成
key1=value1&key2=value2 的RequestBody ， 也就是默认的contentType：
application/x-www-form-urlencoder