您好,登錄后才能下訂單哦!
本文實(shí)例為大家分享了js上傳圖片并顯示圖片名稱的具體代碼,供大家參考,具體內(nèi)容如下
今天整理了一下上傳圖,用jquery的還是方便點(diǎn),小女子整理的是原生的js?。?!
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> img{max-width: 100%; height: 100px;margin: 10px 20px;} .img_list .img-div{width: 100px;height: 200px; float: left; overflow: hidden;text-align: center; } .upload{position: relative;} .upload input{opacity: 0;position: absolute;top: 0;left: 10px;height: 100px;width: 100px;} .upload .upload_box{width: 100px;height: 100px;background-color: pink;color: white;} .img-div p{color: #28a4b0;margin: 0;} </style> </head> <body> <div class="upload"> <input class="file_input" type="file" multiple id="avc"/> <div class="upload_box"> 點(diǎn)我上傳圖片哦 </div> </div> <div class="img_list"> </div> <script> var file_input=document.getElementsByClassName("file_input")[0]; // 觸發(fā)事件用的是change,因?yàn)閒iles是數(shù)組,需要添加下標(biāo) file_input.addEventListener("change",function(){ var obj=this; var obj_name=this.files[0].name; var img_length=obj.files.length; for(var i=0;i<img_length;i++) { if(!(/image\/\w+/).test(obj.files[i].type)) { alert("上傳的圖片格式錯(cuò)誤,請(qǐng)上傳圖片"); return false; } var reader = new FileReader(); reader.error=function(e){ alert("讀取異常") } reader.onload = function(e){ // div_html是包括圖片和圖片名稱的容器 var img_html='<img src="'+e.target.result+'"/>'; var div_html=document.createElement("div"); var p_html=document.createElement("p"); if(document.getElementsByClassName("img_list")[0].children.length<5) { div_html.innerHTML=img_html; div_html.appendChild(p_html); p_html.innerHTML=obj_name; div_html.className="img-div"; document.getElementsByClassName("img_list")[0].appendChild(div_html); }else{ alert("最多上傳5張圖片") } }; reader.οnlοadstart=function(){ console.log("開(kāi)始讀取"+obj_name); } reader.οnprοgress=function(e){ if(e.lengthComputable){ console.log("正在讀取文件") } }; reader.readAsDataURL(obj.files[i]); } }) </script> </body> </html>
更多精彩內(nèi)容請(qǐng)參考專題《ajax上傳技術(shù)匯總》,《javascript文件上傳操作匯總》和《jQuery上傳操作匯總》進(jìn)行學(xué)習(xí)。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。