js實現上傳圖片到服務器的

這篇文章主要介紹了js實現上傳圖片到服務器的，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

具體內容如下

HTML

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

javascript

<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>

感謝你能夠認真閱讀完這篇文章，希望小編分享的“js實現上傳圖片到服務器的”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!