[html5+java]文件异步读取及上传核心代码

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 dropData
21             }
22             event.stopPropagation();
23         }
24     }
25 </script>

View Code