文章目录
js的拖拽上传,并在页面中展示
前言
本次实现的功能,也可以通过更改事件属性:转变成点击然上传文件的转变(点击上传文件这里就不在展示了,基本思路都很像!!)
话不多说,直接上代码!!!
一、js实现拖拽功能(文件拖拽到指定位置)
div.addEventListener(‘dragenter’, denter);
div.addEventListener(‘dragover’, dover);
div.addEventListener(‘drop’, dp)
绑定了三个事件分别是: 1.拖拽文件进入div 2.拖拽文件在div上 3.鼠标松开
<div class="box"></div> <script> let div = document.querySelector('.box'); div.addEventListener('dragenter', denter); div.addEventListener('dragover', dover); div.addEventListener('drop', dp) function denter(e) {
e.preventDefault(); } function dover(e) {
e.preventDefault(); } function dp(e) {
e.stopPropagation(); //阻止事件冒泡 e.preventDefault();//阻止默认事件 (上面的都一样) //拿到拖拽的文件 var file = e.dataTransfer.files //调用函数传递文件的内容,然后进行解析转化为bas64格式的内容 handFiles(file); } </script> 二、关于怎么读取文件内容(用到FileRead()对象)
1.第一步:遍历传递过来的file
2.第二步:判断传递过来的文件是否是图片格式
3.第三步:创建 new FileRead() 对象,然后 拿到创建的对象调用 readAsDataURL(f) 方法
4.第四步: new FileRead()对象中的 onload方法,通过 e.target.result :获取到当前图片的base64地址,然后给图片的src
代码如下（示例）：
function handFiles(file) {
for (let index = 0; index < file.length; index++) {
var f = file[index]; //判断是否是图片 var imageType = /^image/ if (!imageType.test(f.type)) {
continue }; //创建图片 var im = document.createElement('img'); /* im.classList.add('obj'); */ div.appendChild(im); //读取文件对象 var reader = new FileReader(); //读取文件对象 //通过reader开始读取内容,一旦读取成功,会在result属性中获取一个base64的字符串 //读取文件是一个异步过程 reader.readAsDataURL(f); //这里使用了一次立即执行函数(解决的问题是变量作用域带来的问题) reader.onload = function(aimg) {
//第一种直接给src赋值 // im.src = e.target.result return function(e) {
aimg.src = e.target.result; } }(im) } } 问题(解决方案):
这个方法的案例,容易在修改图片地址的位置,出现变量作用域的问题导致图片地址无法被正常更改,解决方法:①使用闭包函数解决 ②使用立即执行函数 ③将所有的变量都用 es6 的let声明.
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/208564.html原文链接：https://javaforall.net
