文章目录
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声明.