JS使用H5實(shí)現(xiàn)上傳圖片預(yù)覽的功能,以下是代碼的實(shí)現(xiàn):
創(chuàng)新互聯(lián)建站憑借專業(yè)的設(shè)計(jì)團(tuán)隊(duì)扎實(shí)的技術(shù)支持、優(yōu)質(zhì)高效的服務(wù)意識(shí)和豐厚的資源優(yōu)勢,提供專業(yè)的網(wǎng)站策劃、做網(wǎng)站、成都網(wǎng)站制作、網(wǎng)站優(yōu)化、軟件開發(fā)、網(wǎng)站改版等服務(wù),在成都10多年的網(wǎng)站建設(shè)設(shè)計(jì)經(jīng)驗(yàn),為成都千余家中小型企業(yè)策劃設(shè)計(jì)了網(wǎng)站。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文件上傳預(yù)覽</title> <script type="text/javascript"> //預(yù)覽圖片,參數(shù)說明:第一個(gè)參數(shù):要預(yù)覽的file對象,第二個(gè)參數(shù):預(yù)覽的img標(biāo)簽的id名稱 function yl(obj,id) { //FileReader if(window.FileReader){//驗(yàn)證當(dāng)前的瀏覽器是否支持圖片預(yù)覽 var reader=new FileReader(); var file=obj.files[0]; var regexImage=/^image\//;//js正則表達(dá)式,匹配是否擁有image if(regexImage.test(file.type)){ //設(shè)置讀取結(jié)束的回調(diào)函數(shù) reader.οnlοad=function(data){ var img=document.getElementById(id); img.src=data.target.result;//將結(jié)果數(shù)據(jù)顯示到img標(biāo)簽上 }; //開始讀取上傳的文件內(nèi)容 reader.readAsDataURL(file); }else{ alert("親,看清楚是圖片預(yù)覽"); return; } }else{ alert("親,瀏覽器該升級(jí)了"); return; } } </script> </head> <body> <form action="fileup" method="post" enctype="multipart/form-data"> <input type="file" name="f1" onchange="yl(this,'ylimg')"/> <img alt="圖片預(yù)覽" id="ylimg" width="400px" height="400px"/> <input type="submit" value="上傳圖片"/> </form> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
標(biāo)題名稱:JS使用H5實(shí)現(xiàn)圖片預(yù)覽功能
URL地址:http://bm7419.com/article42/godhec.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供動(dòng)態(tài)網(wǎng)站、建站公司、企業(yè)網(wǎng)站制作、ChatGPT、電子商務(wù)、域名注冊
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)