API Fail JavaScript melaksanakan kemahiran pratonton_javascript muat naik fail

1. Gambaran Keseluruhan
Pada masa lalu, mengakses fail tempatan adalah pening untuk aplikasi berasaskan penyemak imbas. Walaupun JavaScript memainkan peranan yang semakin penting dengan pembangunan berterusan teknologi aplikasi Web 2.0, disebabkan pertimbangan keselamatan, JavaScript sentiasa tidak dapat mengakses fail tempatan. Oleh itu, untuk melaksanakan fungsi seperti menyeret dan memuat naik fail tempatan dalam penyemak imbas, kami perlu menggunakan pelbagai teknologi yang disediakan oleh penyemak imbas tertentu. Sebagai contoh, untuk IE, kita perlu menggunakan kawalan ActiveX untuk mendapatkan akses kepada fail tempatan, dan untuk Firefox, kita juga perlu menggunakan pembangunan pemalam. Memandangkan pelaksanaan teknikal penyemak imbas yang berbeza adalah berbeza, agar program ini menyokong berbilang penyemak imbas, program kami akan menjadi sangat kompleks dan sukar untuk diselenggara. Tetapi kini, semua ini telah diubah sepenuhnya kerana kemunculan API Fail.

API Fail ialah draf yang diserahkan oleh Mozilla kepada W3C, bertujuan untuk melancarkan satu set API JavaScript standard Fungsi asasnya ialah mengendalikan fail tempatan dengan JavaScript. Atas sebab keselamatan, API ini hanya menyediakan akses terhad kepada fail tempatan. Dengan itu, kami boleh menggunakan JavaScript tulen untuk membaca dan memuat naik fail setempat dengan mudah. Pada masa ini, FireFox 3.6 ialah pelayar pertama yang menyokong ciri ini. Selain itu, versi terkini pelayar Google Chrome dan Safari juga mempunyai sokongan yang sepadan. API Fail dijangka menjadi sebahagian daripada spesifikasi HTML 5 masa hadapan yang sedang dibangunkan oleh W3C.

2. Gambaran Keseluruhan API Fail
API Fail terdiri daripada satu set objek dan peristiwa JavaScript. Memberi pembangun keupayaan untuk memanipulasi fail yang dipilih dalam Rajah 1 menunjukkan hubungan gabungan semua JavaScript dalam API Fail.

Taip FileList mengandungi satu set objek Fail. Biasanya objek FileList boleh diambil dari medan fail () dalam borang. Objek Blob mewakili satu set aliran binari mentah yang boleh dibaca oleh penyemak imbas. Dalam objek Blob, atribut saiz mewakili saiz strim. Fungsi slice() boleh membelah objek Blob panjang kepada kepingan kecil. Objek Fail mewarisi daripada objek Blob, dan atribut berkaitan Fail ditambahkan pada objek Blob. Antaranya, nama atribut mewakili nama fail Nama ini mengalih keluar maklumat laluan fail dan hanya mengekalkan nama fail. Atribut jenis mewakili jenis MIME fail. Urn atribut mewakili maklumat URN fail ini. Untuk melengkapkan operasi membaca fail, contoh objek FileReader dikaitkan dengan objek Fail atau Blob dan menyediakan tiga fungsi membaca fail dan 6 peristiwa yang berbeza.

Kandungan khusus fungsi membaca fail:
readAsBinaryString() Baca kandungan fail dan hasil baca ialah rentetan binari. Setiap bait fail akan diwakili sebagai integer dalam julat [0..255]. Fungsi ini menerima objek Fail sebagai parameter.
readAsText() Baca kandungan fail dan hasil baca ialah rentetan teks yang mewakili kandungan fail. Fungsi ini menerima objek Fail dan nama pengekodan teks sebagai parameter.
readAsDataURL Baca kandungan fail dan hasil baca ialah data: URL. DataURL ditakrifkan oleh RFC2397.
Kandungan khusus acara membaca fail:
Nama Acara Penerangan Acara
Onloadstart Dicetuskan apabila bacaan fail bermula.
Kemajuan Dicetuskan dengan kerap apabila bacaan sedang dijalankan. Parameter acara akan mengandungi jumlah keseluruhan data yang dibaca.
Batalkan Dipecat apabila bacaan dibatalkan.
Ralat Dicetuskan apabila ralat membaca berlaku.
Muat Dicetuskan apabila bacaan selesai dengan jayanya.
Loadend Akan dicetuskan apabila bacaan selesai, tanpa mengira kejayaan atau kegagalan.

3. Contoh mudah API Fail
Seterusnya, kami menggunakan contoh mudah untuk menunjukkan penggunaan asas API Fail. Contoh ini mengandungi dua fail kod, index.html mengandungi kod HTML di bahagian web dan kod JavaScript untuk memproses muat naik.jsp mengandungi kod pada bahagian pelayan untuk menerima fail yang dimuat naik. Sila lihat sourcecode.zip dalam lampiran. Dalam contoh ini, kami akan memaparkan bentuk tradisional dengan medan pemilihan Fail. Apabila pengguna memilih fail dan mengklik hantar, kami menggunakan API Fail untuk membaca kandungan fail dan memuat naik fail ke pelayan menggunakan Ajax melalui objek XMLHttpRequest. Rajah 2 menunjukkan tangkapan skrin demo sedang beraksi.

Kami menunjukkan kod langkah demi langkah. Penyenaraian 1 menunjukkan bahagian HTML kod.
Bahagian HTML kod contoh Penyenaraian 1

 <body> 
 <h1>File API Demo</h1> 
 <p> 
 <!-- 用于文件上传的表单元素 --> 
 <form name="demoForm" id="demoForm" method="post" enctype="multipart/form-data" 
 action="javascript: uploadAndSubmit();"> 
 <p>Upload File: <input type="file" name="file" /></p> 
 <p><input type="submit" value="Submit" /></p> 
 </form> 
 <div>Progessing (in Bytes): <span id="bytesRead"> 
 </span> / <span id="bytesTotal"></span> 
 </div> 
 </p> 
 </body>

Seperti yang anda lihat, kami menggunakan teg

 function uploadAndSubmit() { 
 var form = document.forms["demoForm"]; 
  
 if (form["file"].files.length > 0) { 
 // 寻找表单域中的 <input type="file" ... /> 标签
 var file = form["file"].files[0]; 
 // try sending 
 var reader = new FileReader();

 reader.onloadstart = function() { 
 // 这个事件在读取开始时触发
 console.log("onloadstart"); 
 document.getElementById("bytesTotal").textContent = file.size; 
 } 
 reader.onprogress = function(p) { 
 // 这个事件在读取进行中定时触发
 console.log("onprogress"); 
 document.getElementById("bytesRead").textContent = p.loaded; 
 }

 reader.onload = function() { 
  // 这个事件在读取成功结束后触发
 console.log("load complete"); 
 }

 reader.onloadend = function() { 
  // 这个事件在读取结束后，无论成功或者失败都会触发
 if (reader.error) { 
 console.log(reader.error); 
 } else { 
 document.getElementById("bytesRead").textContent = file.size; 
 // 构造 XMLHttpRequest 对象，发送文件 Binary 数据
 var xhr = new XMLHttpRequest(); 
 xhr.open(/* method */ "POST", 
 /* target url */ "upload.jsp&#63;fileName=" + file.name 
 /*, async, default to true */); 
 xhr.overrideMimeType("application/octet-stream"); 
 xhr.sendAsBinary(reader.result); 
 xhr.onreadystatechange = function() { 
 if (xhr.readyState == 4) { 
 if (xhr.status == 200) { 
 console.log("upload complete"); 
 console.log("response: " + xhr.responseText); 
 } 
 } 
 } 
 } 
 }

 reader.readAsBinaryString(file); 
 } else { 
 alert ("Please choose a file."); 
 } 
 }

 var form = document.forms["demoForm"];

 if (form["file"].files.length > 0) 
 { 
 var file = form["file"].files[0]; 
… …
 } 
 else 
 { 
 alert ("Please choose a file."); 
 }

 reader.onloadstart = function() 
 { 
 console.log("onloadstart"); 
 document.getElementById("bytesTotal").textContent = file.size; 
 }
在 onprogress 事件触发时，更新页面上已读取数据量的 <span> 元素。参见清单 5

 reader.onprogress = function(p) { 
 console.log("onloadstart"); 
 document.getElementById("bytesRead").textContent = p.loaded; 
 }

 reader.onloadend = function() 
 { 
 if (reader.error) 
 { 
 console.log(reader.error); 
 } 
 else 
 { 
 // 构造 XMLHttpRequest 对象，发送文件 Binary 数据
 var xhr = new XMLHttpRequest(); 
 xhr.open(/* method */ "POST", 
 /* target url */ "upload.jsp?fileName=" + file.name 
 /*, async, default to true */); 
 xhr.overrideMimeType("application/octet-stream"); 
 xhr.sendAsBinary(reader.result); 
… …
 } 
 }

 <%@ page import="java.io.*" %><% 
  BufferedInputStream fileIn = new 
 BufferedInputStream(request.getInputStream()); 
  String fn = request.getParameter("fileName"); 
  
  byte[] buf = new byte[1024];
//接收文件上传并保存到 d:\
  File file = new File("d:/" + fn); 
  
  BufferedOutputStream fileOut = new BufferedOutputStream(new 
 FileOutputStream(file)); 
  
  while (true) { 
    // 读取数据
   int bytesIn = fileIn.read(buf, 0, 1024); 
   
   System.out.println(bytesIn); 
   
   if (bytesIn == -1) 
 { 
     break; 
   } 
 else 
 { 
     fileOut.write(buf, 0, bytesIn); 
   } 
  } 
  
  fileOut.flush(); 
  fileOut.close(); 
  
  out.print(file.getAbsolutePath()); 
 %>

 <div id="container"> 
 <span>Drag and drop files here to upload.</span> 
 <ul id="fileList"></ul> 
 </div>

 function addDNDListeners() 
 { 
 var container = document.getElementById("container"); 
 var fileList = document.getElementById("fileList"); 
 // 拖拽进入目标对象时触发
 container.addEventListener("dragenter", function(event) 
 { 
 fileList.innerHTML =''; 
 event.stopPropagation(); 
 event.preventDefault(); 
 }, false); 
 // 拖拽在目标对象上时触发
 container.addEventListener("dragover", function(event) 
 { 
 event.stopPropagation(); 
 event.preventDefault(); 
 }, false); 
 // 拖拽结束时触发
 container.addEventListener("drop", handleDrop, false); 
 } 
 window.addEventListener("load", addDNDListeners, false);

 function handleDrop(event) 
 { 
  // 获取拖拽的文件列表
 var files = event.dataTransfer.files; 
 event.stopPropagation(); 
 event.preventDefault(); 
 var fileList = document.getElementById("fileList"); 
 // 展示文件缩略图，文件名和上传进度，上传文件
 for (var i = 0; i < files.length; i++) 
 { 
 var file = files[i]; 
 var li = document.createElement('li'); 
 var progressbar = document.createElement('div'); 
 var img = document.createElement('img'); 
 var name = document.createElement('span'); 
 progressbar.className = "progressBar"; 
 img.src = files[i].getAsDataURL(); 
 img.width = 32; 
 img.height = 32; 
 name.innerHTML = file.name; 
 li.appendChild(img); 
 li.appendChild(name); 
 li.appendChild(progressbar); 
 fileList.appendChild(li); 
 uploadFile(file, progressbar) 
 } 
 }

 function uploadFile(file, progressbar) 
 { 
 var xhr = new XMLHttpRequest(); 
 var upload = xhr.upload;

 var p = document.createElement('p'); 
 p.textContent = "0%"; 
 progressbar.appendChild(p); 
 upload.progressbar = progressbar; 
 // 设置上传文件相关的事件处理函数
 upload.addEventListener("progress", uploadProgress, false); 
 upload.addEventListener("load", uploadSucceed, false); 
 upload.addEventListener("error", uploadError, false); 
 // 上传文件
 xhr.open("POST", "upload.jsp?fileName="+file.name); 
 xhr.overrideMimeType("application/octet-stream"); 
 xhr.sendAsBinary(file.getAsBinary()); 
 } 
 function uploadProgress(event) 
 { 
 if (event.lengthComputable) 
 { 
  // 将进度换算成百分比
 var percentage = Math.round((event.loaded * 100) / event.total); 
 console.log("percentage:" + percentage); 
 if (percentage < 100) 
 { 
 event.target.progressbar.firstChild.style.width = (percentage*2) + "px"; 
 event.target.progressbar.firstChild.textContent = percentage + "%"; 
 } 
 } 
 } 
 function uploadSucceed(event) 
 { 
 event.target.progressbar.firstChild.style.width = "200px"; 
 event.target.progressbar.firstChild.textContent = "100%"; 
 } 
 function uploadError(error) 
 { 
 alert("error: " + error); 
 }