So verwenden Sie JQuery zum Hochladen von Dateien

Dieses Mal zeige ich Ihnen, wie Sie mit jquery Dateien hochladen und laden. Was sind die Vorsichtsmaßnahmen für die Verwendung von jquery zum Hochladen und Laden von Dateien?

Das Hochladen von Dateien erfolgt hauptsächlich durch Ziehen von Dateien. Das Ondrop-Ereignis von HTML5 wird hauptsächlich zum Hochladen von Inhalten verwendet. FormData-Übertragung:

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

Fortschrittsartikel-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();
 }
 }

Dieser Inhalt ist nur eine allgemeine technische Anleitung zum Hochladen von Dateien, die entsprechend Ihrem eigenen Projekt verbessert werden kann!

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Tutorial zur Verwendung von webpack.config.js-Parametern

So verwenden Sie die p5.js-Tastatur in das Projekt Interaktion

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JQuery zum Hochladen von Dateien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!