js實(shí)現(xiàn)上傳圖片到服務(wù)器的

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

具體內(nèi)容如下

HTML

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

javascript

<script>
    // 定義一個(gè)接收轉(zhuǎn)為base64圖片的數(shù)組
    let ArrayImg=[]
    var index = 0;  //給圖片加唯一標(biāo)識(shí) 好刪除
    // 獲取頁面上的元素
    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è)本地緩存的對(duì)象
      // 把獲取到的文件本地緩存轉(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è)變量中儲(chǔ)存
        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)識(shí)好移除
        // 把上傳存好的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ù)組對(duì)應(yīng)的數(shù)據(jù)
                    console.log(ArrayImg,'圖片數(shù)組');
                }
                //inddex記錄當(dāng)前循環(huán)了多少次好移除ArrayImg數(shù)組中的鏈接地址
        index++
      }
      }
    }
</script>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“js實(shí)現(xiàn)上傳圖片到服務(wù)器的”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!