本篇文章為大家展示了使用jquery和ajax怎么上傳文件，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

十余年的鄂倫春網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開(kāi)發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營(yíng)銷(xiāo)型網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶(hù)設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整鄂倫春建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無(wú)論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“鄂倫春網(wǎng)站設(shè)計(jì)”,“鄂倫春網(wǎng)站推廣”以來(lái)，每個(gè)客戶(hù)項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

什么是ajax

ajax是一種在無(wú)需重新加載整個(gè)網(wǎng)頁(yè)的情況下，能夠更新部分網(wǎng)頁(yè)的技術(shù)，可以通過(guò)在后臺(tái)與服務(wù)器進(jìn)行少量數(shù)據(jù)交換，使網(wǎng)頁(yè)實(shí)現(xiàn)異步更新。

一、單文件上傳

 
 
 
  
  
  
 
 
 
 文件: 
 
上傳文件 
 
 
 $(function () { 
 $("#upload").click(function () { 
  var formData = new FormData($('#uploadForm')[0]); 
  $.ajax({ 
  type: 'post', 
  url: "http://192.168.1.101:8080/springbootdemo/file/upload", 
  data: formData, 
  cache: false, 
  processData: false, 
  contentType: false, 
  }).success(function (data) { 
  alert(data); 
  }).error(function () { 
  alert("上傳失敗"); 
  }); 
 }); 
 }); 
 

二、多文件上傳

 
 
 
  
  
  
 
 
 
 文件:
 
 
上傳文件 
 
 
 $(function () { 
 $("#upload").click(function () { 
  var formData = new FormData($('#uploadForm')[0]); 
  $.ajax({ 
  type: 'post', 
  url: "http://192.168.1.101:8080/springbootdemo/file/uploadFiles", 
  data: formData, 
  cache: false, 
  processData: false, 
  contentType: false, 
  }).success(function (data) { 
  alert(data); 
  }).error(function () { 
  alert("上傳失敗"); 
  }); 
 }); 
 }); 
 

這個(gè)是多選上傳，關(guān)鍵是multiple="multiple"這個(gè)屬性，另外使用的接口也是多文件上傳的接口。

當(dāng)然也可以使用單文件上傳的模式，多次選擇就可以了，只不過(guò)接口也是iyaoshiyong多文件上傳的接口。

 
 
 
  
  
  
 
 
 
 文件:
 
 文件:
 
 文件:
 
 
上傳文件 
 
 
 $(function () { 
 $("#upload").click(function () { 
  var formData = new FormData($('#uploadForm')[0]); 
  $.ajax({ 
  type: 'post', 
  url: "http://192.168.1.101:8080/springbootdemo/file/uploadFiles", 
  data: formData, 
  cache: false, 
  processData: false, 
  contentType: false, 
  }).success(function (data) { 
  alert(data); 
  }).error(function () { 
  alert("上傳失敗"); 
  }); 
 }); 
 }); 
 

測(cè)試都通過(guò)了?。?！

下面通過(guò)一段實(shí)例代碼給大家介紹ajax拖拽上傳功能的實(shí)現(xiàn)，具體代碼如下；

AJAX拖拽上傳功能，實(shí)現(xiàn)代碼如下所示：

 
 
 
 
 


 +