首先，在使用HTML5 Drag and Drop API实现实现文件上传前，我们需要定义两个关键区域：源元素(source element)和目标元素(target element)，其中源通常是用户的操作系统环境如桌面或某个目录下的文件；而目标则是网页上的一个可接受被放置数据的目标容器，一般用`
`、 `<input type="file">`等标签设置并添加相应的事件监听器以支持drag-and-drop行为。
以下是一个基本步骤详细解读：
1. **启用拖曳功能**：
你需要先给要成为“投放区”的DOM元素开启draggable属性，并设定其值为true。例如:
<div id="drop-area" draggable="true"></div>
2. **绑定拖动相关事件**：
- `ondragenter`: 当鼠标携带项目进入该元素时触发。
document.getElementById('drop-area').addEventListener('dragenter', function(e){
// 阻止默认行为 (防止某些情况下页面发生跳转)
e.preventDefault();
// 可在此处改变样式表示可以放下文件
this.style.backgroundColor = '#eee';
});
- `ondragover`: 在此区域内拖移过程中持续触发。需调用preventDefault()阻止其他可能的操作，默认是不允许任何Drop动作发生的。
document.getElementById('drop-area').addEventListener('dragover', function(event){
event.preventDefault();
});
- `ondrop`: 用户实际松开鼠标完成拖放到指定区域的动作后会触发这个事件，这时我们可以获取所拖入的数据——在这里主要是File对象列表。
let dropArea = document.getElementById("drop-area");
dropArea.addEventListener('drop',function(event){
event.stopPropagation();
event.preventDefault();
var filesList = event.dataTransfer.files; // 获取已投递的所有文件
for(let i=0;i < filesList.length ;i++){
processFiles(filesList[i]); // 调用自己的函数去解析及上传这些文件
}
// 这里恢复背景颜色或其他状态提示UI更新
this.style.backgroundColor = '';
}, false);
3. **读取与上传文件**: 使用FileReader接口对从dataTransfer.files获得的对象进行逐个读取和预览或者直接发送至服务器端进行存储。
function processFiles(file){
const reader = new FileReader();
reader.onloadend = () => {
console.log(reader.result); // 文件内容（如果是文本类型）
/* 实际应用中你可能会做如下操作 */
uploadToServer(reader.result,file.name); // 假设uploadToServer是你自定义的一个用于向服务端提交文件的方法
}
if(file.type.startsWith('image/')){ // 对于图片类型的文件你可以展示缩略图
reader.readAsDataURL(file);
} else { // 其他非图像类别的文件则按原格式加载
reader.readAsText(file,'UTF-8');
}
}
function uploadToServer(data,filename){...} // 自行填充你的异步HTTP请求代码片段以便把文件传输到后台
总结来说，借助 HTML5 的 drag 和 drop 功能以及 File APIs，前端工程师能够方便快捷地构建出高性能、易使用的多文件上传组件。这不仅简化了传统表单式文件上传流程，同时也增强了 Web 应用程序的人机交互体验，使得复杂的任务变得简单明快，符合现今互联网产品对于极致 UX 设计的要求。但值得注意的是，由于安全限制等因素，请确保针对不同的业务场景合理设计并充分测试这一特性所带来的效果。
以下是一个基本步骤详细解读：
1. **启用拖曳功能**：
你需要先给要成为“投放区”的DOM元素开启draggable属性，并设定其值为true。例如:
html
<div id="drop-area" draggable="true"></div>
2. **绑定拖动相关事件**：
- `ondragenter`: 当鼠标携带项目进入该元素时触发。
javascript
document.getElementById('drop-area').addEventListener('dragenter', function(e){
// 阻止默认行为 (防止某些情况下页面发生跳转)
e.preventDefault();
// 可在此处改变样式表示可以放下文件
this.style.backgroundColor = '#eee';
});
- `ondragover`: 在此区域内拖移过程中持续触发。需调用preventDefault()阻止其他可能的操作，默认是不允许任何Drop动作发生的。
javascript
document.getElementById('drop-area').addEventListener('dragover', function(event){
event.preventDefault();
});
- `ondrop`: 用户实际松开鼠标完成拖放到指定区域的动作后会触发这个事件，这时我们可以获取所拖入的数据——在这里主要是File对象列表。
javascript
let dropArea = document.getElementById("drop-area");
dropArea.addEventListener('drop',function(event){
event.stopPropagation();
event.preventDefault();
var filesList = event.dataTransfer.files; // 获取已投递的所有文件
for(let i=0;i < filesList.length ;i++){
processFiles(filesList[i]); // 调用自己的函数去解析及上传这些文件
}
// 这里恢复背景颜色或其他状态提示UI更新
this.style.backgroundColor = '';
}, false);
3. **读取与上传文件**: 使用FileReader接口对从dataTransfer.files获得的对象进行逐个读取和预览或者直接发送至服务器端进行存储。
javascript
function processFiles(file){
const reader = new FileReader();
reader.onloadend = () => {
console.log(reader.result); // 文件内容（如果是文本类型）
/* 实际应用中你可能会做如下操作 */
uploadToServer(reader.result,file.name); // 假设uploadToServer是你自定义的一个用于向服务端提交文件的方法
}
if(file.type.startsWith('image/')){ // 对于图片类型的文件你可以展示缩略图
reader.readAsDataURL(file);
} else { // 其他非图像类别的文件则按原格式加载
reader.readAsText(file,'UTF-8');
}
}
function uploadToServer(data,filename){...} // 自行填充你的异步HTTP请求代码片段以便把文件传输到后台
总结来说，借助 HTML5 的 drag 和 drop 功能以及 File APIs，前端工程师能够方便快捷地构建出高性能、易使用的多文件上传组件。这不仅简化了传统表单式文件上传流程，同时也增强了 Web 应用程序的人机交互体验，使得复杂的任务变得简单明快，符合现今互联网产品对于极致 UX 设计的要求。但值得注意的是，由于安全限制等因素，请确保针对不同的业务场景合理设计并充分测试这一特性所带来的效果。
标签： html5拖文件上传
