js原生简单的上传图片

学习前端的小伙伴们在项目中确定都遇到过上传图片的这种功能吧.

那么今天咱们就来学习一下原生的上传图片吧~

go go go go~~~~

---

在原生js中j就有一个很简单的方法用来操做文件 ——FileReader

容许web应用程序异步读取储存在用户电脑上的文件，能够使用file和blob对象指定要读取的文件或数据。File对象能够是来自input上传文件返回的fileList对象，也能够来自拖放生成的DataTransfer对象，还能够是来自在一个HTMLCanvasElement上执行mozGetAsFile()方法后返回结果。

这是官方介绍哈!

<div class="uploader" id="uploader">
    <label for="">上传</label>
    <div class="file">
        <input type="file" accept="image/*" id="file" onchange="uploadFile(event)">
        <span>+</span>
    </div>
</div>
<ul id="list"></ul>

<script>
        var reader = new FileReader();
        var list = document.getElementById("list");
        var lis = list.getElementsByTagName("li");

       function uploadFile(e){
        var file = document.getElementById("file");
        var value = e.srcElement.files[0];
        if(!value) return false;
        if(value.type.indexOf("image") == -1){
            alert("请上传图片")
        }
        reader.readAsDataURL(value);
        reader.onload = function(ev){
            var li = document.createElement("li");
            var img = document.createElement("img");
            var close = document.createElement("b");
            close.innerHTML = "X";
            close.className = 'close';
            img.src= ev.srcElement.result;
            li.appendChild(img);
            li.appendChild(close)
            list.appendChild(li);
            closeFn();
        }
       }
       
       function closeFn(){
        for(var i=0;i<lis.length;i++){
            var close  = lis[i].querySelector(".close");
            close.onclick = function(){
                list.removeChild(this.parentNode)
            }
        }
       }

    </script>

ok！简单的上传图片并浏览就完成喽！

效果图：