本文實例為大家分享了js實現上傳圖片到服務器的具體代碼，供大家參考，具體內容如下

HTML

//多張圖片上傳multiple

//原生提交按鈕

javascript

// 定義一個接收轉為base64圖片的數組

let ArrayImg=[]

var index = 0; //給圖片加唯一標識 好刪除

// 獲取頁面上的元素

let input=document.getElementById('file')

console.log(input);

// 綁定oncheange事件

input.οnchange=function(){

var file=this.files[0] //獲取頁面上選擇的文件[N]指的是獲取第幾個

// console.log(file);

var iLen = this.files.length; //獲取圖片長度

// console.log(iLen);

for(var i=0;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

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

}

}

}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

總結

以上是生活随笔為你收集整理的javascript上传文件到服务器,js实现上传图片到服务器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。