您好,登錄后才能下訂單哦!
本文實(shí)例講述了js實(shí)現(xiàn)的在本地預(yù)覽圖片功能。分享給大家供大家參考,具體如下:
移動(dòng)web
<body> <form enctype="multipart/form-data" name="form1"> 上傳文件:<input id="f" type="file" name="f" onchange="change()" /> 預(yù)覽:<img id="preview" alt="" name="pic" width="300" height="150" /> </form> <script> function change() { var pic = document.getElementById("preview"); var file = document.getElementById("f"); var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();//js獲取文件名的后綴 html5Reader(file); } function html5Reader(file){ var file = file.files[0]; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e){ var pic = document.getElementById("preview"); pic.src=this.result; } } </script> </body> </html>
兼容ie版本
function change() { var pic = document.getElementById("preview"); var file = document.getElementById("f"); var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase(); // gif在IE瀏覽器暫時(shí)無法顯示 if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){ alert("文件必須為圖片!"); return; } // IE瀏覽器 if (document.all) { file.select(); var reallocalpath = document.selection.createRange().text; var ie6 = /msie 6/i.test(navigator.userAgent); // IE6瀏覽器設(shè)置img的src為本地路徑可以直接顯示圖片 if (ie6) pic.src = reallocalpath; else { // 非IE6版本的IE由于安全問題直接設(shè)置img的src無法顯示本地圖片,但是可以通過濾鏡來實(shí)現(xiàn) pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")"; // 設(shè)置img的src為base64編碼的透明圖片 取消顯示瀏覽器默認(rèn)圖片 pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='; } }else{ html5Reader(file); } } function html5Reader(file){ var file = file.files[0]; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e){ var pic = document.getElementById("preview"); pic.src=this.result; } }
更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題:《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。