JavaScript asli melaksanakan kemahiran upload_javascript berbilang fail tak segerak

Ini ialah versi diubah suai bagi artikel sebelumnya. Anda boleh terus menggunakannya selagi kod latar belakang kekal tidak berubah, tetapi skrip tidak lagi menggunakan jQuery dan digantikan dengan kod JavaScript asli, jadi kami terutamanya melihat kod JS.

Mula-mula perkenalkan parameter teknikal:

Teknologi halaman: HTML5

Teknologi belakang: Servlet 3.0

Pelayan: Tomcat 7.0

Skrip: JavaScript

HTML5 Atribut baharu komponen fail

terima : Jika anda menambahkan atribut ini pada komponen fail, anda boleh terus mengawal jenis fail yang dimuat naik, yang sangat mudah.

berbilang: Sama ada untuk membenarkan pemilihan fail berbilang
Kod halaman HTML5 diubah suai

<img width="400" height="250"/><br />
<input type="file" id="pic" name="pic" onchange="printFileInfo()" accept="image/*" multiple="multiple"/>
<input type="button" value="上传图片" onclick="uploadFile()" /><br />
<div id="parent">
　　<div id="son"></div>
</div>

Nilai terima boleh didapati dalam: Jenis MIME IANA (senarai lengkap jenis MIME standard Jika anda menggunakan pembangunan DW, perisian itu sendiri akan mempunyai gesaan).

Jika anda memilih berbilang fail, anda boleh menggunakan JS untuk mencetak dalam gelung untuk melihat nama, jenis dan saiz fail Lihat kod demo

function printFileInfo(){
 
 var picFile = document.getElementById("pic"); 
 var files = picFile.files;
 for(var i=0; i<files.length; i++){
  var file = files[i];
  var div = document.createElement("div")
  div.innerHTML = "第("+ (i+1) +") 个文件的名字："+ file.name +
  " , 文件类型："+ file.type +" , 文件大小:"+ file.size 
  document.body.appendChild( div)
 }
}

Sekarang anda boleh mengulangi berbilang fail, anda boleh cuba memuat naik berbilang fail.

1 mula-mula buat objek XMLHttpRequest

//Ini ialah pembolehubah global. Kerana ia adalah contoh, ia tidak menentukan jenis pelayar Jika versi IE yang lebih rendah menulis seperti ini, akan ada masalah
var xhr = XMLHttpRequest() baharu
2. Artikel sebelum ini memperkenalkan acara kemajuan (Progress) Kali ini, dua acara, kemajuan dan kesilapan, dilaksanakan

ralat: Dicetuskan apabila ralat berlaku dalam permintaan.

Sepadan dengan kegagalan muat naik yang disebabkan oleh ralat semasa muat naik: uploadFailed()

//上传失败
function uploadFailed(evt) {
 alert("上传失败");
}
　　progress：在接收相应期间持续不断触发。

　　　　　　对应上传进度方法：onprogress()
/**
 * 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
 */
function onprogress(evt){
　var loaded = evt.loaded;       //已经上传大小情况 
 var tot = evt.total;       //附件总大小 
 var per = Math.floor(100*loaded/tot);   //已经上传的百分比 
　 $("#son").html( per +"%" );
 $("#son").css("width" , per +"%");
}

Langkah terakhir ialah kaedah muat naik Ambil perhatian bahawa kaedah muat naik dalam kod html di atas juga perlu ditukar kepada kaedah uploadFile() untuk menggunakannya seperti biasa.

 //上传文件
function uploadFile() {
　　//将上传的多个文件放入formData中
 var picFileList = $("#pic").get(0).files;
 var formData = new FormData();
 for(var i=0; i< picFileList.length; i++){
  formData.append("file" , picFileList[i] );
 }

 //监听事件
 xhr.upload.addEventListener("progress", onprogress, false);
 xhr.addEventListener("error", uploadFailed, false);//发送文件和表单自定义参数
 xhr.open("POST", "upload");
 //记得加入上传数据formData
　　 xhr.send(formData);
} 

PS: Lagipun, ini hanya contoh demonstrasi fungsi asas Ia masih jauh dari keperluan syarikat.

Anda boleh menggabungkan artikel ini untuk belajar: Cara melaksanakan bar kemajuan muat naik fail Ajax berdasarkan HTML5 (versi jquery)

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.