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

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

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

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

下面为jsp代码

1. <form id= "uploadForm">  
2.       <p >指定文件名： <input type="text" name="filename" value= ""/></p >  
3.       <p >上传文件： <input type="file" name="file"/></ p>  
4.       <input type="button" value="上传" οnclick="doUpload()" />  
5. </form>  

 下面为js代码

1. function doUpload() {  
2.      var formData = new FormData($( "#uploadForm" )[0]);  
3.      $.ajax({  
4.           url: 'http://localhost:8080/cfJAX_RS/rest/file/upload' ,  
5.           type: 'POST',  
6.           data: formData,  
7.           async: false,  
8.           cache: false,  
9.           contentType: false,  
10.           processData: false,  
11.           success: function (returndata) {  
12.               alert(returndata);  
13.           },  
14.           error: function (returndata) {  
15.               alert(returndata);  
16.           }  
17.      });  
18. }  

可以轻松实现上传。

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

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" οnsubmit="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>

 

转载于:https://www.cnblogs.com/zhaoblog/p/5587580.html