H5上传文件
XMLHttpRequest 在Html5 规范中已经有全新的变化，规定了XMLHttpRequest Level 2规范（目前最新版本）包含下列新的特性：
- 处理字节流，例如作为上传或者下载的File，Blob，FormData对象
- 上传或者下载中的进度事件
- 跨站点请求
- 允许创建匿名请求
- 可以设置请求超时
在这篇文章中我们将能够更清楚的看到#1和#2两个特性。通常，上传文件用XMLHttpRequest并且提供上传进度信息给最终的用户，需要注意的是这种方式解决了不需要服务器端做任何改变，至少是目前处理multipart/form-data协议。所以服务器端的处理逻辑保留不变，这使得开发者适应这种技术相当容易。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Upload Files using XMLHttpRequest - Minimal</title> 5 <script type="text/javascript"> 6 function fileSelected() { 7 var file = document.getElementById('fileToUpload').files[0]; 8 if (file) { 9 var fileSize = 0; 10 if (file.size > 1024 * 1024) 11 fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB'; 12 else 13 fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB'; 14 document.getElementById('fileName').innerHTML = 'Name: ' + file.name; 15 document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize; 16 document.getElementById('fileType').innerHTML = 'Type: ' + file.type; 17 } 18 } 19 function uploadFile() { 20 var fd = new FormData(); 21 fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]); 22 var xhr = new XMLHttpRequest(); 23 xhr.upload.addEventListener("progress", uploadProgress, false); 24 xhr.addEventListener("load", uploadComplete, false); 25 xhr.addEventListener("error", uploadFailed, false); 26 xhr.addEventListener("abort", uploadCanceled, false); 27 xhr.open("POST", "upload.do");//修改成自己的接口 28 xhr.send(fd); 29 } 30 function uploadProgress(evt) { 31 if (evt.lengthComputable) { 32 var percentComplete = Math.round(evt.loaded * 100 / evt.total); 33 document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%'; 34 } 35 else { 36 document.getElementById('progressNumber').innerHTML = 'unable to compute'; 37 } 38 } 39 function uploadComplete(evt) { 40 /* 服务器端返回响应时候触发event事件*/ 41 alert(evt.target.responseText); 42 } 43 function uploadFailed(evt) { 44 alert("There was an error attempting to upload the file."); 45 } 46 function uploadCanceled(evt) { 47 alert("The upload has been canceled by the user or the browser dropped the connection."); 48 } 49 </script> 50 </head> 51 <body> 52 <form id="form1" enctype="multipart/form-data" method="post" action="Upload.aspx"> 53 <div class="row"> 54 <label for="fileToUpload">Select a File to Upload</label><br /> 55 <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/> 56 </div> 57 <div id="fileName"></div> 58 <div id="fileSize"></div> 59 <div id="fileType"></div> 60 <div class="row"> 61 <input type="button" onclick="uploadFile()" value="Upload" /> 62 </div> 63 <div id="progressNumber"></div> 64 </form> 65 </body> 66 </html>
