jquery 實現(xiàn)拖動文件上傳加載進度條功能

更新時間：2018年03月18日 10:12:03 作者：oubao

這篇文章主要介紹了jquery 實現(xiàn)拖動文件上傳加載進度條功能,主要用到的是HTML5的ondrop事件，非常不錯，具有參考借鑒價值，需要的朋友可以參考下

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

//進度條
<div class="parent-dlg" >
 <div class="progress-label">0%</div>
 <div class="son"></div>
</div>
//要拖動到的地方
<div class="main_content_center"></div>

js:

var dz = $('#main_content_center');
dz.ondragover = function(ev) {
 //阻止瀏覽器默認打開文件的操作
 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"){ //判斷是否是需要的問件類型
  TS.errorAlert("請選擇.jpg、.png、.xml類型的文件上傳！");
  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:'',
 type:'post',
 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();
 }
 }

　進度條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)容只是一個大概的文件上傳技術(shù)方向，可根據(jù)自己的項目進行改進！　

總結(jié)

以上所述是小編給大家介紹的jquery 實現(xiàn)拖動文件上傳加載進度條功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

您可能感興趣的文章: