点击上传和拖拽上传
2018-09-29 本文已影响0人
Miss_麦兜
点击上传
利用 type="file" 的 input，上面覆盖一个 div 或者其他元素，点击该元素时触发 input 的click事件，通过 e.target.files 获取上传的文件的信息，最后通过 Ajax 请求将 flies 数据发送至服务器。
<input type="file" id="fileInput" name="fileselect" multiple>
拖拽上传
利用 HTML5 drag & drop 拖拽与拖放，在 drop 事件中通过 e.dataTransfer.files 获取文件。
const imgUrl = window.webkitURL.createObjectURL(fileList[0]); //预览图URL
const filename = fileList[0].name; //图片名称
| 名称 | 解释 | 作用对象/值 |
|---|---|---|
| DataTransfer 对象 | 拖拽对象用来传递的媒介，一般使用为Event.dataTransfer | / |
| dragstart 事件 | 拖拽元素开始被拖拽的时候触发 | 被拖曳元素 |
| dragenter 事件 | 拖曳元素进入目标元素的时候触发 | 目标元素 |
| dragover 事件 | 拖拽元素在目标元素上移动的时候触发 | 目标元素 |
| drop 事件 | 被拖拽的元素在目标元素上同时鼠标放开触发 | 目标元素 |
| dragend 事件 | 拖拽完成后触发 | 被拖曳元素 |
| Event.preventDefault() 方法 | 用drop事件时要阻止浏览器的默认动作，默认的动作是显示这个图片或是相关信息，并不是真的执行drop | / |
| Event.effectAllowed 属性 | 拖拽的效果，在 dragenter 和 dragover 事件的事件处理程序中，如果这个效果不是用户要求的动作，那就应该修改dropEffect 的值 | copy: 复制到新的位置；move: 移动到新的位置；link: 建立一个源位置到新位置的链接；none: 禁止放置（禁止任何操作）. |
