jquery implémente la fonction de glisser le téléchargement du fichier et de charger la barre de progression

Cet article présente principalement jquery pour implémenter la fonction de glisser-déposer de téléchargement de fichiers et de chargement de la barre de progression. Il utilise principalement l'événement ondrop de HTML5. Il est très bon et a une valeur de référence. Les amis dans le besoin peuvent s'y référer. 🎜> Le téléchargement de fichiers s'effectue en faisant glisser les fichiers. L'événement ondrop de HTML5 est principalement utilisé. Transmission de formulaire de canal de contenu de téléchargement :

js:

//进度条
<p class="parent-dlg" >
 <p class="progress-label">0%</p>
 <p class="son"></p>
</p>
//要拖动到的地方
<p class="main_content_center"></p>

Barre de progression css :

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:&#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;  //已经上传大小情况 
 var tot = evt.total;  //附件总大小 
 var per = Math.floor(100*loaded/tot); //已经上传的百分比 
 $(".progress-label").html( per +"%" );
 $(".son").css("width" , per +"%");
 if(per>=100){
 $(".parent-dlg").hide();
 }
 }

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

.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;}

Articles associés :

Solution au problème de clignotement du chargement de la page vue

Une brève discussion sur le problème de js pour obtenir le ModelAndView valeur

Le problème et la solution du scintillement de {{}} lors du rendu de la vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!