html5拖拽上传文件代码

2 篇文章 0 订阅

通过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 ); 

 

监听上传进度和完成事件

  width="0" height="0" src="http://blog.sina.com.cn/s/blog_6ab1c8fe0100lm8h.html">

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); 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值