本文實(shí)例為大家分享了js實(shí)現(xiàn)圖片上傳本地預(yù)覽效果的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> label{display: inline-block;width:200px;height:40px;border:1px solid #ccc;} .ob{background:#ccc;padding:10px;} .imgbox img{height:100px;width:100px;margin:10px;} </style></head><body> <div class="ob" id="od" draggable="true"> <input type="file" id="file" multiple="multiple"> </div> <div class="imgbox"></div> <script> //獲取文件url function createObjectURL(blob){ if (window.URL){ return window.URL.createObjectURL(blob); } else if (window.webkitURL){ return window.webkitURL.createObjectURL(blob); } else { return null; } } var box = document.querySelector(".imgbox"); //顯示圖片box var file = document.querySelector("#file"); //file對(duì)象 var domFragment = document.createDocumentFragment(); //文檔流優(yōu)化多次改動(dòng)dom //觸發(fā)選中文件事件 file.onchange = function(e){ box.innerHTML =""; //清空上一次顯示圖片效果 e = e || event; var file = this.files; //獲取選中的文件對(duì)象 for(var i = 0, len = file.length; i < len; i++){ var imgTag = document.createElement("img"); var fileName = file[i].name; //獲取當(dāng)前文件的文件名 var url = createObjectURL(file[i]); //獲取當(dāng)前文件對(duì)象的URL //忽略大小寫 var jpg = (fileName.indexOf(".jpg") > -1) || (fileName.toLowerCase().indexOf(".jpg") > -1); var png = (fileName.indexOf(".png") > -1) || (fileName.toLowerCase().indexOf(".png") > -1); var jpeg = (fileName.indexOf(".jpeg") > -1) || (fileName.toLowerCase().indexOf(".jpeg") > -1); //判斷文件是否是圖片類型 if(jpg || png || jpeg){ imgTag.src = url; domFragment.appendChild(imgTag); }else{ alert("請(qǐng)選擇圖片類型文件！"); } } //最佳顯示 box.appendChild(domFragment); } </script></body></html>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
