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提交文件流。