JavaScript 上传文件并展示

文章目录


前言

本次实现的功能,也可以通过更改事件属性:转变成点击然上传文件的转变(点击上传文件这里就不在展示了,基本思路都很像!!)


话不多说,直接上代码!!!

一、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声明.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

满脑子技术的前端工程师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值