html5+java文件异步读取及上传关键代码段
功能：
1.多文件文件拖拽上传，file input 多文件选择
2.html5 File Api 异步FormData，blob上传，图片显示
3.java端接受
核心代码：
1.拖拽代码段：
1 <div id="dropzone"> 2 <div>Drag & drop your file here...</div> 3 <div id='showFile'></div> 4 <div style='clear: both'></div> 5 </div> 6 7 <script> 8 /*function for drag and drop*/ 9 window.onload = function() {10 var dropzone = document.getElementById("dropzone");11 dropzone.ondragover = dropzone.ondragenter = function(event) {12 event.PReventDefault();13 event.stopPropagation();14 }15 dropzone.ondrop = function(event) {16 event.preventDefault();17 var filesArray = event.dataTransfer.files;18 for ( var i = 0; i < filesArray.length; i++) {19 var fObj = new fileObj(filesArray[i], idTmp);20 // to do tasks with dropData21 }22 event.stopPropagation();23 }24 }25 </script>View Code
file input 多文件选择：
1 <p> 2 Upload File: <input id='uploadFile' type="file" name="file" multiple /> 3 </p> 4 5 <script> 6 $("#uploadFile").change(function(e) { 7 event.preventDefault(); 8 var filesArray = e.target.files; 9 for ( var i = 0; i < filesArray.length; i++) {10 var fObj = new fileObj(filesArray[i], idTmp);11 // to do tasks with dropData12 idTmp++;13 }14 event.stopPropagation();15 });16 </script>View Code2.html5 File Api 异步上传:
1).使用FormData上传
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Upload Files using xmlHttpRequest - Minimal</title> 5 6 <script type="text/Javascript"> 7 function fileSelected() { 8 var file = document.getElementById('fileToUpload').files[0]; 9 if (file) {10 var fileSize = 0;11 if (file.size > 1024 * 1024)12 fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';13 else14 fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';15 16 document.getElementById('fileName').innerHTML = 'Name: ' + file.name;17 document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;18 document.getElementById('fileType').innerHTML = 'Type: ' + file.type;19 }20 }21 22 function uploadFile() {23 var fd = new FormData();24 fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);25 var xhr = new xmlhttpRequest();26 xhr.upload.addEventListener("progress", uploadProgress, false);27 xhr.addEventListener("load", uploadComplete, false);28 xhr.addEventListener("error", uploadFailed, false);29 xhr.addEventListener("abort", uploadCanceled, false);30 xhr.open("POST", "UploadMinimal.aspx");31 xhr.send(fd);32 }33 34 function uploadProgress(evt) {35 if (evt.lengthComputable) {36 var percentComplete = Math.round(evt.loaded * 100 / evt.total);37 document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';38 }39 else {40 document.getElementById('progressNumber').innerHTML = 'unable to compute';41 }42 }43 44 function uploadComplete(evt) {45 /* This event is raised when the server send back a response */46 alert(evt.target.responseText);47 }48 49 function uploadFailed(evt) {50 alert("There was an error attempting to upload the file.");51 }52 53 function uploadCanceled(evt) {54 alert("The upload has been canceled by the user or the browser dropped the connection.");55 }56 </script>57 </head>58 <body>59 <form id="form1" enctype="multipart/form-data" method="post" action="upload.php">60 <div class="row">61 <label for="fileToUpload">Select a File to Upload</label>62 <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>63 </div>64 <div id="fileName"></div>65 <div id="fileSize"></div>66 <div id="fileType"></div>67 <div class="row">68 <input type="button" onclick="uploadFile()" value="Upload" />69 </div>70 <div id="progressNumber"></div>71 </form>72 73 </body>74 </html>View Code
2).使用blob，readAsBinaryString上传
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>HTML5 File Upload[By WangXinsheng]</title> 6 <script src="../js/jquery-1.11.1.min.js"></script> 7 </head> 8 <style> 9 #dropzone { 10 margin-top: 10px; 11 width: 500px; 12 min-height: 300px; 13 height: 100%; 14 border: 1px dotted grey; 15 } 16 17 header { 18 font-weight: bold; 19 } 20 21 .uploadFile { 22 display: inline; 23 float: left; 24 width: 45%; 25 border: 1px solid gray; 26 margin: 5px; 27 min-height: 20px; 28 padding-bottom: 5px; 29 padding-left: 5px; 30 } 31 32 .uploadFile p { 33 margin: 2px; 34 } 35 36 .uploadFile progress { 37 -webkit-appearance: none; 38 } 39 .uploadFile .ok{ 40 cursor:pointer; 41 } 42 43 .uploadFile ::-webkit-progress-inner-element { 44 45 } 46 47 .uploadFile ::-webkit-progress-bar { 48 background: white; 49 border: 1px solid gray; 50 } 51 52 .uploadFile ::-webkit-progress-value { 53 background: green; 54 } 55 56 .uploadFile ::-moz-progress-bar { 57 background: white 58 } 59 60 .uploadFile ::-ms-fill { 61 background: green; 62 } 63 </style> 64 <body> 65 <header>HTML5 File Upload</header> 66 <p> 67 Upload File: <input id='uploadFile' type="file" name="file" multiple /> 68 </p> 69 70 <div id="dropzone"> 71 <div>Drag & drop your file here...</div> 72 <div id='showFile'></div> 73 <div style='clear: both'></div> 74 </div> 75 <script> 76 var oneFileDom = "<div class='uploadFile' id='uf_{%id%}'>" 77 +"<p>{%name%}</p>" 78 +"<progress width='100%'></progress>" 79 +"<
新闻热点
疑难解答
