通过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()依次处理所有文件
1
2
3
4
5
6
|
handleFiles
= function (files)
{ for ( var i
= 0; i < files.length; i++) { var file
= files[i]; }
}
|
对于图片类型的文件可以直接读取内容,显示预览图
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请求
1
2
|
var xhr
= new XMLHttpRequest();
xhr.open( 'post' ,
'/file/upload' ,
true );
|
监听上传进度和完成事件
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的格式上传
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);
|