|
通过HTML的文件API ，Firefox、Chrome等浏览器已经支持从操作系统直接拖拽文件，并上传到服务器。
相对于使用了十多年的HTML表单，这是一个革命性的进步。虽然IE的落后让很多开发者还在观望中，但是Gmail邮箱的附件拖拽功能已经给部分用户带来了极大的方便，而需要大量上传文件的CMS（内容管理系统）也将会从中受益。
让我们看一下Firefox 是如何使用拖拽上传功能的：
首先提供一个区域来放置文件
Html代码
| <div name="image" id="dropbox" style="min-width:300px;min-height:100px;border:3px dashed silver;"></div> |
然后监听拖拽过程中的dragenter、dragleave、drop等事件
Js代码
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); |
|