通过HTML的文件API ，Firefox、Chrome等浏览器已经支持从操作系统直接拖拽文件，并上传到服务器。

     相对于使用了十多年的HTML表单，这是一个革命性的进步。虽然IE的落后让很多开发者还在观望中，但是Gmail邮箱的附件拖拽功能已经给部分用户带来了极大的方便，而需要大量上传文件的CMS（内容管理系统）也将会从中受益。     

     让我们看一下Firefox 是如何使用拖拽上传功能的：

     首先提供一个区域来放置文件

     Html代码 

 

1
<div name="image" id="dropbox" style="min-width:300px;min-height:100px;border:3px dashed silver;"></div> 

 

 

然后监听拖拽过程中的dragenter、dragleave、drop等事件

Js代码

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
document.addEventListener("dragenter", function(e){ 
    dropbox.style.borderColor = 'gray'; 
}, false); 
document.addEventListener("dragleave", function(e){ 
    dropbox.style.borderColor = 'silver'; 
}, false); 
dropbox.addEventListener("dragenter", function(e){ 
    dropbox.style.borderColor = 'gray'; 
    dropbox.style.backgroundColor = 'white'; 
}, false); 
dropbox.addEventListener("dragleave", function(e){ 
    dropbox.style.backgroundColor = 'transparent'; 
}, false); 
dropbox.addEventListener("dragenter", function(e){ 
    e.stopPropagation(); 
    e.preventDefault(); 
}, false); 
dropbox.addEventListener("dragover", function(e){ 
    e.stopPropagation(); 
    e.preventDefault(); 
}, false); 
dropbox.addEventListener("drop", function(e){ 
    e.stopPropagation(); 
    e.preventDefault(); 
       
    handleFiles(e.dataTransfer.files); 
       
    submit.disabled = false; 
}, false); 

 

其中最主要的是drop事件中用handleFiles()依次处理所有文件

 

Js代码
1
2
3
4
5
6
handleFiles = function(files) { 
    for (var i = 0; i < files.length; i++) { 
        var file = files[i]; 
   
    } 
} 

对于图片类型的文件可以直接读取内容，显示预览图

 

Js代码

 

 

1
2
3
4
5
6
7
8
9
10
11
12
if (!file.type.match(/image*/)) { 
    continue; 
} 
   
var img = document.createElement("img"); 
img.classList.add("obj"); 
img.file = file; 
preview.appendChild(img); 
   
var reader = new FileReader(); 
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img); 
reader.readAsDataURL(file); 

 

接下来就是核心功能：ajax上传。首先新建一个XHR请求

 

Js代码

 

1
2
var xhr = new XMLHttpRequest(); 
xhr.open('post', '/file/upload', true); 

 

监听上传进度和完成事件

 

Js代码
1
2
3
4
5
6
7
8
9
10
xhr.upload.addEventListener("progress", function(e) { 
    if (e.lengthComputable) { 
        var percentage = Math.round((e.loaded * 100) / e.total); 
        img.style.opacity = 1-percentage/100.0; 
    } 
}, false); 
   
xhr.upload.addEventListener("load", function(e){ 
       
}, false); 

最后把数据模拟成multipart/form-data的格式上传

 

Js代码
1
2
3
4
5
6
7
8
9
10
11
xhr.setRequestHeader("Content-Type", "multipart/form-data, boundary="+boundary); // simulate a file MIME POST request. 
xhr.setRequestHeader("Content-Length", fileSize); 
   
var body = ''; 
body += "--" + boundary + "\r\n"; 
body += "Content-Disposition: form-data; name=\""+dropbox.getAttribute('name')+"\"; filename=\"" + fileName + "\"\r\n"; 
body += "Content-Type: "+fileType+"\r\n\r\n"; 
body += fileData + "\r\n"; 
body += "--" + boundary + "--\r\n"; 
   
xhr.sendAsBinary(body);