异步提交文件前端解决方案

需求

点击按钮，弹出选择文件框，选择文件后就立即传到后端，对文件进行操作，并且页面不进行刷新

思路

页面放置一个隐藏的表单，当点击按钮时，使用js调用type=file的input的click事件，此时就会弹出选择文件框，对该input添加onchange事件，当选择完文件后就会调用onchange对应的方法，在方法中使用ajax异步请求，调用服务

代码

1. html

<form action="" method="post" enctype="multipart/form-data" name="form" style="display: none">
  <input id="uploadFile" type="file" name="uploadFile" onchange="submitform()">
  <input  type="text" name="tableName" value="ELE_GP_CATALOGUE">
</form>

2. js

importFile = function(){
    $("input[name='uploadFile']").click();
}

submitform = function(){
    var form = new FormData($("form[name='form']")[0]);
    $.ajax({
          type: 'post',
          encType: 'multipart/form-data', //表明上传类型为文件
          processData: false, //这里设置成false，表明上传数据不需转换成字符串
          contentType: false,
          cache: false,
          url: "/df/gp/element/importData.do?tokenid=" + tokenid,
          data: form,
          dataType : "json",
          success : function(data) {
              $("input[name='uploadFile']").val("");//解决当选择同一文件时，不会重新调用的问题
              ip.ipInfoJump(data.message);
            }
        });
}