JavaScript File API實作檔案上傳預覽_javascript技巧

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