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>
参考链接:
- https://developer.mozilla.org/zh-CN/docs/Web/API/File/Using_files_from_web_applications
- 权威指南第三版 668页
- 点赞
- 收藏
- 分享
- 文章举报
相关文章推荐
- JavaScript使用Ajax上传文件的示例代码
- [JavaScript]多个表单中文件上传网址的获得的代码示例
- 阿里云oss post上传文件 JavaScript代码示例 $.ajax()
- [JavaScript]多个表单中文件上传网址的获得的代码示例
- Spring Cloud Feign的文件上传实现的示例代码
- [导入]Asp.net 2.0 用 FileUpload 控件实现多文件上传 用户控件(示例代码下载)
- html5实现多文件的上传示例代码
- Asp.net 2.0 用 FileUpload 控件实现多文件上传 用户控件(示例代码下载).NET技术
- php 生成自动创建文件夹并上传文件的示例代码
- servlet+jquery实现文件上传进度条示例代码
- 原生javascript实现拖动元素示例代码
- SharePoint 2013 系统 JavaScript 创建文件和文件的完整代码和示例。
- AngularJS上传文件的示例代码
- js纯前端实现腾讯cos文件上传功能的示例代码
- vuejs+element-ui+laravel5.4上传文件的示例代码
- 用Fine Uploader+ASP.NET MVC实现ajax文件上传[代码示例]
- 通过Javascript读取本地Excel文件内容的代码示例
- Flask实现图片的上传、下载及展示示例代码
- java实现文件上传下载和图片压缩代码示例
- JavaScript调用客户端的可执行文件(示例代码)