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