涓€涓猘jax瀹炵幇琛ㄥ崟涓婁紶鏂囦欢鐨勭鍣?formdata

Posted 2020-07-25

鏍囩锛?/p>

閫氳繃浼犵粺鐨刦orm琛ㄥ崟鎻愪氦鐨勬柟寮忎笂浼犳枃浠讹細

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()鍙互瀵筬orm琛ㄥ崟杩涜搴忓垪鍖栵紝浠庤€屽皢form琛ㄥ崟涓殑鎵€鏈夊弬鏁颁紶閫掑埌鏈嶅姟绔€?/div>

     

    浣嗘槸涓婅堪鏂瑰紡锛屽彧鑳戒紶閫掍竴鑸殑鍙傛暟锛屼笂浼犳枃浠剁殑鏂囦欢娴佹槸鏃犳硶琚簭鍒楀寲骞朵紶閫掔殑銆?/div>

    涓嶈繃濡備粖涓绘祦娴忚鍣ㄩ兘寮€濮嬫敮鎸佷竴涓彨鍋欶ormData鐨勫璞★紝鏈変簡杩欎釜FormData锛屾垜浠氨鍙互杞绘澗鍦颁娇鐢ˋjax鏂瑰紡杩涜鏂囦欢涓婁紶浜嗐€?/div>

涓嬮潰涓簀sp浠ｇ爜

1. <form id= "uploadForm">  
2.       <p >鎸囧畾鏂囦欢鍚嶏細 <input type="text" name="filename" value= ""/></p >  
3.       <p >涓婁紶鏂囦欢锛?nbsp;<input type="file" name="file"/></ p>  
4.       <input type="button" value="涓婁紶" onclick="doUpload()" />  
5. </form>  

 涓嬮潰涓簀s浠ｇ爜

1. function doUpload() {  
2.      var formData = new FormData($( "#uploadForm" )[0]);  
3.      $.ajax({  
4.           url: 鈥榟ttp://localhost:8080/cfJAX_RS/rest/file/upload鈥?nbsp;,  
5.           type: 鈥楶OST鈥?  
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. }  

鍙互杞绘澗瀹炵幇涓婁紶銆?/p>

涓€涓嬩负鎴戣嚜宸卞啓鐨勫疄渚嬶紝宸茬粡杩囦翰韬獙璇侊細

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浠ｇ爜锛?/p>

<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">褰撳墠鎿嶄綔鎻愮ず锛?lt;/span><span class="padding-left5 colorgorningage">涓婁紶鏂囦欢鏍煎紡涓簒ls锛屽崟娆″鍏ョ敤鎴锋暟涓嶈兘澶т簬1000鏉°€?lt;/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>