本文實(shí)例為大家分享了js實(shí)現(xiàn)上傳圖片到服務(wù)器的具體代碼，供大家參考，具體內(nèi)容如下
HTML
|
1
2
3
4
|
//多張圖片上傳multiple<input type="file" id="file" multiple>//原生提交按鈕<input type="submit"> |
javascript
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
<script> // 定義一個(gè)接收轉(zhuǎn)為base64圖片的數(shù)組 let ArrayImg=[] var index = 0; //給圖片加唯一標(biāo)識(shí) 好刪除 // 獲取頁(yè)面上的元素 let input=document.getElementById('file') console.log(input); // 綁定oncheange事件 input.onchange=function(){ var file=this.files[0] //獲取頁(yè)面上選擇的文件[N]指的是獲取第幾個(gè) // console.log(file); var iLen = this.files.length; //獲取圖片長(zhǎng)度 // console.log(iLen); for(var i=0;i<iLen;i++){ //通過(guò)循環(huán)把多張圖片顯示到頁(yè)面上或者上傳 // 本地緩存 預(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 () { //通過(guò)onload 事件把this.result 取出來(lái) // console.log(this.result,333); ArrayImg.push(this.result) // 通過(guò)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ù)組'); //然后通過(guò)dom操作插入到dom樹(shù)中 顯示圖片 document.getElementsByTagName('body')[0].appendChild(div) //插入dom樹(shù) // console.log(img); // 通過(guò)給div綁定單擊事件 刪除當(dāng)前點(diǎn)擊的div跟當(dāng)前點(diǎn)擊的圖片數(shù)組中的base64地址 div.onclick = function(){ this.remove(); // 在頁(yè)面中刪除該圖片元素 delete ArrayImg[this.index]; // 刪除ArrayImg數(shù)組對(duì)應(yīng)的數(shù)據(jù) console.log(ArrayImg,'圖片數(shù)組'); } //inddex記錄當(dāng)前循環(huán)了多少次好移除ArrayImg數(shù)組中的鏈接地址 index++ } } }</script> |
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持服務(wù)器之家。
原文鏈接：https://blog.csdn.net/a134468/article/details/115579529
