01_drag:只有拖拽预览,选择上传,不能拖拽上传。 https://blog.csdn.net/sqzhao/article/details/50736357
1. 设置元素可拖放
为了使元素可拖动,把 draggable 属性设置为 true
<img draggable="true" /%gt;

2. 拖放事件
有7个拖放事件可以捕获,如下:
	dragstart:开始拖元素触发
	dragenter:元素拖进可drop元素(绑定drop事件的元素)时触发
	dragover:当元素拖动到drop元素上时触发
	drop:当元素放下到drop元素触发
	dragleave :当元素离开drop元素时触发
	drag:每次元素被拖动时会触发
	dragend:放开拖动元素时触发

完成一次拖放的事件过程是: dragstart –> dragenter –> dragover –> drop –> dragend

3.拖拽上传实现
先阻止页面默认的拖放行为,不然页面会被拖放的文件替换了。
file.getAsBinary获取文件的二进制数据流。
XMLHttpRequest Level 2中的FormData接口。


小结:
1.监听拖拽:监听页面元素的拖拽事件,包括:dragenter、dragover、dragleave和drop,一定要将dragover的默认事件取消掉,不然无法触发drop事件。如需拖拽页面里的元素,需要给其添加属性draggable=”true”;
2.获取拖拽文件:在drop事件触发后通过e.dataTransfer.files获取拖拽文件列表,.length属性获取文件数量,.type属性获取文件类型。
3.读取图片数据并添加预览图:实例化FileReader对象,通过其readAsDataURL(file)方法获取文件二进制流,并监听其onload事件,将e.result赋值给img的src属性,最后将图片append到DOM中。
4.发送图片数据:使用file.getAsBinary 和 FormData分别模拟表单数据AJAX提交文件流。
拖拽图片预览