02 drag upload: 拖拽预览 点击提交才上传;选择文件手动上传。统一行为了。
小结:
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提交文件流。
拖拽图片预览