HTML5本地拖拽上传实现图片预览功能的实践总结

首先网上的帖子很多，但是真正给我莫大帮助的是http://blog.bingo929.com/google-enjoy-html5-drag-drop-filereaderenren.html《给力的 Google HTML5 训练营(HTML5 Drag&Drop 拖拽、FileReader实例教程)》，这篇文章写的很精彩，我也是在此对自己的学习进行一些总结。

　　之前看的帖子很多，但是首先会发现的一个问题，就是IE和FF和chrome分别不兼容，之前这个问题困扰了我很久，IE使用滤镜 FF使用fillReader已经不新鲜了，但是为何chrome始终无法兼容，究其原因，和版本问题有着直接关系，由于html5暂时还处于起步阶段，虽然出现了很多优秀的作品，但是各大浏览器仍然不能全部支持，很多都是部分支持，但是各大浏览器都在日后的开发包括更新中及时的加入支持的最新html5和css3的属性，所以我感觉和更新有很大的原因，我测试的版本是在最新版chrome(21.0.1180.79)版本下对效果实现了完美的支持，之前的版本忘记了！

　　废话扯完，进入正题！

对于拖拽事件，顺序为，dragstart-dragenter-dragover-drop-dragend其中尤为重要的是,其中重点要设置的时间是 dragenter、dragover和drop事件，因为要取消浏览器的默认行为大体格式为：

box.addEventListener("dragenter", function(e){ 
            e.stopPropagation();  
            e.preventDefault(); 
            $(e.target).addClass("box-shadow");    
            $(e.target).next().show();
        }, false);

此处为dragenter进入拖拽指定区域的时候，我们要取消其默认行为和冒泡事件，同时我们可以添加一些想要再次时候出发的事件函数，均可以使用addEventListener()。

oDropBox.addEventListener('dragover', function(e) {
      e.stopPropagation();
      e.preventDefault();
}, false);
oDropBox.addEventListener('drop', handleDrop, false);

dragover此处表示页面在指定区域内鼠标未松下，持续拖拽的时候要阻止其默认行为

drop 表示鼠标放下的时候，触发应有的事件函数，此处重点就是所绑定的事件，使我们可以具有上传预览图片的功能

那么下面重点就是实现上传预览功能，重点就在这个handleDrop()函数中：

关于拖拽本地文件到页面的几个相关FileReader属性和事件：

readAsDataURL方法：参数为要读取的文件对象，将文件读取为DataUrl
onload事件：当读取文件成功完成的时候触发此事件

在FileReader onload事件触发后，你可以通过this.result来获取读取的文件数据，如果是图片，将返回base64格式的图片数据。

function handleDrop(e) {
　　e.stopPropagation();
　　e.preventDefault();

　　var fileList  = e.dataTransfer.files,　　//获取拖拽文件
　　　　oImg = document.createElement('img'),
　　　　reader = new FileReader();

　　reader.onload = function(e) {
　　　　oImg.src = this.result;
　　　　oDropBox.appendChild(oImg);
　　}
　　reader.readAsDataURL(fileList[0]);　　//这里只取拖拽的第一个，实际中你可以遍历处理file列表
｝

那么通过这种方法就可以实现拖转图片上传预览的功能，而我做的项目中是拖拽图片上传预览同时实现拖拽自由排序的功能，有时间再做总结！