js實(shí)現(xiàn)的在本地預(yù)覽圖片功能示例

本文實(shí)例講述了js實(shí)現(xiàn)的在本地預(yù)覽圖片功能。分享給大家供大家參考，具體如下：

創(chuàng)新互聯(lián)公司專注于奎屯網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供奎屯營(yíng)銷型網(wǎng)站建設(shè)，奎屯網(wǎng)站制作、奎屯網(wǎng)頁(yè)設(shè)計(jì)、奎屯網(wǎng)站官網(wǎng)定制、小程序開發(fā)服務(wù)，打造奎屯網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供奎屯網(wǎng)站排名全網(wǎng)營(yíng)銷落地服務(wù)。

移動(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í)無(wú)法顯示
   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無(wú)法顯示本地圖片，但是可以通過濾鏡來(lái)實(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ì)有所幫助。

當(dāng)前標(biāo)題：js實(shí)現(xiàn)的在本地預(yù)覽圖片功能示例
網(wǎng)頁(yè)URL：http://muchs.cn/article8/ghgjip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、網(wǎng)站排名、云服務(wù)器、網(wǎng)站維護(hù)、用戶體驗(yàn)、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)