一个ajax实现表单上传文件的神器 formdata

通过传统的form表单提交的方式上传文件：

$.ajax({
     url : "http://localhost:8080/STS/rest/user",
     type : "POST",
     data : $( '#postForm').serialize(),
     success : function(data) {
          $( '#serverResponse').html(data);
     },
     error : function(data) {
          $( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText);
     }
});
如上，通过$('#postForm').serialize()可以对form表单进行序列化，从而将form表单中的所有参数传递到服务端。
 

但是上述方式，只能传递一般的参数，上传文件的文件流是无法被序列化并传递的。
不过如今主流浏览器都开始支持一个叫做FormData的对象，有了这个FormData，我们就可以轻松地使用Ajax方式进行文件上传了。

下面为jsp代码

<form id= "uploadForm">
      <p >指定文件名： <input type="text" name="filename" value= ""/></p >
      <p >上传文件： <input type="file" name="file"/></ p>
      <input type="button" value="上传" onclick="doUpload()" />
</form>

 下面为js代码

function doUpload() {
     var formData = new FormData($( "#uploadForm" )[0]);
     $.ajax({
          url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' ,
          type: 'POST',
          data: formData,
          async: false,
          cache: false,
          contentType: false,
          processData: false,
          success: function (returndata) {
              alert(returndata);
          },
          error: function (returndata) {
              alert(returndata);
          }
     });
}

可以轻松实现上传。

一下为我自己写的实例，已经过亲身验证：

function doCheck(){
var formData = new FormData($( "#upfile" )[0]);
$.ajax({
type:"POST",
url: "${ctx}/user/returnRowsNum",
data:formData,
async:false,
cache: false,
contentType: false,
processData: false,
success:function(data){
if(data){
var numb = data.num
var ti = 20*numb/900
alert(data.num);
alert(numb+"条数据，预计耗时"+ti.toFixed(1)+"分钟，期间请勿操作页面，闹心等待")
}
}
});
}

jsp代码：

<form name="upfile" id="upfile" method="post" enctype="multipart/form-data" onsubmit="return checkSub()" action="${ctx}/user/importUser?1=1" >
<input type="hidden" name="path" id="path" value=""/>
<input type="hidden" name="orgId" id="orgId" value="${orgId}"/>
<div id="mainwindowhidden">
<div class="suggestion">
<span class="sugicon"><span class="strong colorgorning2">当前操作提示：</span><span class="padding-left5 colorgorningage">上传文件格式为xls，单次导入用户数不能大于1000条。</span></span>
</div>
<div class="sugtitle-line"></div>
<div class="formdiv" >
<table border="0" width="100%">
<tr class="trstyle2">
<td class="trtitle01" width="20%"><span class="requiredLabelClass">*</span> 选择文件</td>
<td class="trtitle02" width="80%"><input type="file" name="upfilepath" value="" maxlength="200" size="50" class="infoInput"></td>
</tr>
</table>
</div>
</div>
<div id="downbotton">
<div id="subbotton">
<table border="0" width="100%">
<tr id="bottonsubmit">
<td id="right"><input type="submit" name="Submit" id="submitbotton" onClick="doCheck()" value="确认上传1" class="buttonface" title="确认上传"/></td>
<td id="left" class="padding-left5"><input type="reset" name="reset" onClick="javascript:cancelUpload();" id="release" value="取消上传" class="buttonface" title="取消上传" /></td>
</tr>
</table>
</div>
</div>
</form>