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！簡單的上傳圖片並瀏覽就完成嘍！

效果圖：