答案是通过HTML5的拖放API、FileReader和FormData实现文件拖拽上传与预览。首先创建带样式的拖拽区域，监听dragover、drop等事件并阻止默认行为；在drop事件中获取文件对象，使用FileReader读取图片文件并生成DataURL预览；同时将文件通过FormData封装，利用fetch发送POST请求上传至服务器。关键步骤包括：设置拖放区域样式，绑定拖拽事件处理函数，判断文件类型，读取并展示图片预览，构造FormData提交文件。注意事件冒泡与默认行为的控制，确保文件正确读取与上传。整个过程需按顺序执行，核心为事件监听、文件读取与异步上传的结合。
在JavaScript中实现文件的拖拽上传和预览，主要依赖于HTML5的拖放（Drag and Drop）API、FileReader API 和 FormData。通过监听拖拽事件，读取用户拖入的文件，并在页面上预览图片或上传到服务器。
1. 创建拖拽区域
定义一个用于拖拽文件的区域，设置必要的样式提示用户可以拖入文件。
示例HTML：
2. 监听拖拽事件
为拖拽区域绑定 dragover、dragleave 和 drop 事件，确保能正确响应用户的操作。
JavaScript代码：
const dropzone = document.getElementById(‘dropzone’);
const preview = document.getElementById(‘preview’);
// 阻止默认行为，允许文件被拖入
[‘dragenter’, ‘dragover’, ‘dragleave’, ‘drop’].forEach(eventName => {
dropzone.addEventListener(eventName, e => e.preventDefault());
});
// 拖拽进入时高亮
dropzone.addEventListener(‘dragenter’, () => {
dropzone.style.borderColor = ‘#007cba’;
});
// 拖拽离开恢复样式
dropzone.addEventListener(‘dragleave’, () => {
dropzone.style.borderColor = ‘#ccc’;
});
// 文件被释放时处理
dropzone.addEventListener(‘drop’, e => {
dropzone.style.borderColor = ‘#ccc’;
const files = e.dataTransfer.files;
if (files.length) {
handleFiles(files);
}
});
3. 实现文件预览
使用 FileReader 读取本地文件内容，生成预览图（适用于图片文件）。
立即学习“Java免费学习笔记（深入）”；
function handleFiles(files) {
preview.innerHTML = ”; // 清空之前预览
Array.from(files).forEach(file => {
if (!file.type.match(‘image.*’)) return;
const reader = new FileReader();
reader.onload = e => {
const img = document.createElement(‘img’);
img.src = e.target.result;
img.style.maxWidth = ‘200px’;
img.style.margin = ’10px’;
preview.appendChild(img);
};
reader.readAsDataURL(file);
});
}
4. 实现文件上传
使用 FormData 将文件发送到服务器，可通过 XMLHttpRequest 或 fetch 提交。
function uploadFiles(files) {
const formData = new FormData();
Array.from(files).forEach(file => {
formData.append(‘files[]’, file);
});
fetch(‘/upload’, {
method: ‘POST’,
body: formData
})
.then(response => response.json())
.then(data => console.log(‘上传成功:’, data))
.catch(err => console.error(‘上传失败:’, err));
}
在 handleFiles 函数末尾调用 uploadFiles(files)，即可同时预览并上传。
基本上就这些。只要注意阻止默认拖拽行为、正确获取文件对象、使用 FileReader 预览、FormData 提交，就能实现完整的拖拽上传与预览功能。不复杂但容易忽略细节。
以上就是在JavaScript中，如何实现文件的拖拽上传和预览？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1522724.html
微信扫一扫 
支付宝扫一扫 
