js實現上傳圖片到服務器

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

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