//多張圖片上傳multiple
<input type="file" id="file" multiple>
//原生提交按鈕
<input type="submit">

<script>
    // 定義一個(gè)接收轉(zhuǎn)為base64圖片的數(shù)組
    let ArrayImg=[]
    var index = 0;  //給圖片加唯一標(biāo)識 好刪除
    // 獲取頁面上的元素
    let input=document.getElementById('file')
    console.log(input);
    // 綁定oncheange事件
    input.onchange=function(){
      var file=this.files[0]  //獲取頁面上選擇的文件[N]指的是獲取第幾個(gè)
      // console.log(file);
      var iLen = this.files.length;  //獲取圖片長度
      // console.log(iLen);
      for(var i=0;i<iLen;i++){  //通過循環(huán)把多張圖片顯示到頁面上或者上傳
      // 本地緩存 預(yù)覽
      var filereader = new FileReader()  //創(chuàng)建一個(gè)本地緩存的對象
      // 把獲取到的文件本地緩存轉(zhuǎn)為bese64
      filereader.readAsDataURL(this.files[i])  //轉(zhuǎn)成base64，并存在了自由屬性reader.result里  
        console.log([i]);
        filereader.onload = function () { //通過onload 事件把this.result 取出來
        // console.log(this.result,333);
        ArrayImg.push(this.result)
        // 通過html標(biāo)簽包括到img顯示圖片 放到一個(gè)變量中儲存
        let img1=`<div id="divimg"><img src="${this.result}" alt="" id="id_img"></div>`  
        // 創(chuàng)建一個(gè)新的div
        let div = document.createElement('div')
        div['index'] = index; // 給div加唯一標(biāo)識好移除
        // 把上傳存好的img1放到新建的div里面
        div.innerHTML=img1
        console.log(ArrayImg,'圖片數(shù)組');
        //然后通過dom操作插入到dom樹中 顯示圖片
        document.getElementsByTagName('body')[0].appendChild(div) 　　//插入dom樹
        // console.log(img);
        // 通過給div綁定單擊事件 刪除當(dāng)前點(diǎn)擊的div跟當(dāng)前點(diǎn)擊的圖片數(shù)組中的base64地址
        div.onclick = function(){  
                    this.remove();                  // 在頁面中刪除該圖片元素  
                    delete ArrayImg[this.index];  // 刪除ArrayImg數(shù)組對應(yīng)的數(shù)據(jù)
                    console.log(ArrayImg,'圖片數(shù)組');
                }
                //inddex記錄當(dāng)前循環(huán)了多少次好移除ArrayImg數(shù)組中的鏈接地址
        index++
      }
      }
    }
</script>