您的位置:首页 > Web前端 > JavaScript

JavaScript拖动文件上传并展示缩略图代码示例

2020-04-05 07:15 651 查看

最近又温习了一下H5的知识,因此小小整理一下

效果图


asd那个就是文件上传请求

说明

此处应用到的知识点只要是H5的拖放操作,有两种缩略图展示方式,一种为使用

URL
,另一种是使用
FileReader
,详情见下面代码

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#droptarget {
border: 2px solid black;
width: 100px;
height: 100px;
}

#droptarget.active {
border: 4px solid red;
}
</style>
</head>
<body>
<div id="droptarget">文件拖动到此处</div>
<script>
window.onload = () => {
const draptarget = document.getElementById("droptarget");
droptarget.ondragenter = (e) => {
e.stopPropagation();
e.preventDefault();
const types = e.dataTransfer.types;
if (!types || (types.contains && types.contains("Files")) || (types.indexOf && types.indexOf("Files") != -1)) {
droptarget.classList.add("active");
}
}

droptarget.ondragleave = () => {
e.stopPropagation();
e.preventDefault();
droptarget.classList.remove("active");
}

droptarget.ondragover = (e) => {
e.stopPropagation();
e.preventDefault();
}

droptarget.ondrop = (e) => {
e.stopPropagation();
e.preventDefault();
const files = e.dataTransfer.files;
const formData = new FormData();
for(let i = 0; i < files.length; i++) {
const type = files[i].type;
if (type.substring(0, 6) !== "image/") continue;
const img = document.createElement("img");
// 创建URL, 使用URL形式展示缩略图
img.src = window.URL.createObjectURL(files[i]);
formData.append(i, files[i]);
img.onload = () => {
img.width = 100;
document.body.appendChild(img);
// 销毁URL
window.URL.revokeObjectURL(img.src);
}

// 也可以采用filereader导出的base64展示缩略图
const reader = new FileReader();
reader.addEventListener('load', () => console.log(reader.result));
reader.readAsDataURL(files[i]);
}
fetch('http://asdasdasd.asdasd', {
method: "POST",
body: formData,
mode: 'cors',
credentials: 'include'
})
droptarget.classList.remove("active");
}

}
</script>
</body>
</html>

参考链接:

  1. https://developer.mozilla.org/zh-CN/docs/Web/API/File/Using_files_from_web_applications
  2. 权威指南第三版 668页
  • 点赞
  • 收藏
  • 分享
  • 文章举报
刘翾 博客专家 发布了167 篇原创文章 · 获赞 275 · 访问量 59万+ 他的留言板 关注
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: