這次給大家?guī)?lái)如何利用jquery做出文件上傳加載，利用jquery做出文件上傳加載的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來(lái)看一下。

通過(guò)對(duì)文件的拖動(dòng)實(shí)現(xiàn)文件的上傳，主要用到的是HTML5的ondrop事件，上傳內(nèi)容通道FormData傳輸：

//進(jìn)度條
<p class="parent-dlg" >
?<p class="progress-label">0%</p>
?<p class="son"></p>
</p>
//要拖動(dòng)到的地方
<p class="main_content_center"></p>

js:

var?dz?=?$('#main_content_center');
dz.ondragover?=?function(ev)?{
?//阻止瀏覽器默認(rèn)打開(kāi)文件的操作
?ev.preventDefault();
}
dz.ondrop?=?function(ev)?{
?ev.preventDefault();
?var?files?=?ev.dataTransfer.files;
?var?len?=?files.length,i?=?0;
?while?(i?< len) {
  var filesName=files[i].name;
  var extStart=filesName.lastIndexOf(".");
  var ext=filesName.substring(extStart,filesName.length).toUpperCase();
  if(ext!=".JPG"&&ext!=".PNG"&&ext!=".XML"){ //判斷是否是需要的問(wèn)件類(lèi)型
  TS.errorAlert("請(qǐng)選擇.jpg、.png、.xml類(lèi)型的文件上傳！");
  return false;
  }else{
  test(files[i]);
  }
  i++;
 }
 $(".parent-dlg").show();
}
function test(a){
 var formData = new FormData();
 formData.append("name", a.name);
 formData.append("size", a.size);
 formData.append("data", a);
 $.ajax({
 url:&#39;&#39;,
 type:&#39;post&#39;,
 data:formData,
 cache: false,
 processData: false,
 contentType: false,
 xhr: function(){
 var xhr = $.ajaxSettings.xhr();
 if(onprogress && xhr.upload) {
  xhr.upload.addEventListener("progress" , onprogress, false);
  return xhr;
 }
 } 
 })
};
function onprogress(evt){
 var loaded = evt.loaded;  //已經(jīng)上傳大小情況 
 var tot = evt.total;  //附件總大小 
 var per = Math.floor(100*loaded/tot); //已經(jīng)上傳的百分比 
 $(".progress-label").html( per +"%" );
 $(".son").css("width" , per +"%");
 if(per>=100){
?$(".parent-dlg").hide();
?}
?}

　進(jìn)度條css:

.parent-dlg{position:?absolute;width:400px;?height:20px;?border:1px?solid?#aaaaaa;border-radius:3px;top:30%;left:50%;z-index:9999;margin-left:-200px;display:none;}
.parent-dlg?.progress-label{position:?absolute;left:?50%;top:?4px;font-weight:?bold;text-shadow:?1px?1px?0?#fff;}?
.parent-dlg?.son?{width:0;?height:100%;?background-color:#cccccc;?text-align:center;?line-height:20px;?font-size:16px;?font-weight:bold;}

　此內(nèi)容只是一個(gè)大概的文件上傳技術(shù)方向，可根據(jù)自己的項(xiàng)目進(jìn)行改進(jìn)！　

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！

推薦閱讀：

webpack.config.js參數(shù)使用教程

如何在項(xiàng)目中使用p5.js鍵盤(pán)交互

以上是如何利用jquery做出文件上傳加載的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！