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() //創建一個本地緩存的對象// 把獲取到的文件本地緩存轉為bese64filereader.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>` // 創建一個新的divlet div = document.createElement('div')div['index'] = index; // 給div加唯一標識好移除// 把上傳存好的img1放到新建的div里面div.innerHTML=img1console.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上传图片到服务器的全部內容，希望文章能夠幫你解決所遇到的問題。

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