快捷導(dǎo)航

js圖片上傳前預(yù)覽功能（兼容所有瀏覽器）

更新時(shí)間：2016年08月24日 16:22:33 作者：chua1989

這篇文章主要為大家詳細(xì)介紹了js圖片上傳前預(yù)覽功能，兼容所有瀏覽器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

網(wǎng)上找到的一份文件上傳前預(yù)覽的代碼,轉(zhuǎn)自JavaScript 圖片的上傳前預(yù)覽（兼容所有瀏覽器）

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 <style type="text/css">
 #preview,
 .img,
 img {
  width: 200px;
  height: 200px;
 }
 
 #preview {
  border: 1px solid #000;
 }
 </style>
</head>

<body>
 <div id="preview"></div>
 <input type="file" onchange="preview(this)" />
 <script type="text/javascript">
 function preview(file) {
  var prevDiv = document.getElementById('preview');
  if (file.files && file.files[0]) {
   var reader = new FileReader();
   reader.onload = function(evt) {
    prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
   }
   reader.readAsDataURL(file.files[0]);
  } else {
   prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
  }
 }
 </script>
</body>
</html>

實(shí)現(xiàn)要點(diǎn)

● 對(duì)于 Chrome、Firefox、IE10 使用 FileReader 來(lái)實(shí)現(xiàn)。
● 對(duì)于 IE6~9 使用濾鏡 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 來(lái)實(shí)現(xiàn)。
測(cè)試了一下IE8+都沒(méi)有問(wèn)題。但是IE7下file.value被瀏覽器去掉了文件路徑分割線從而顯示不出來(lái)

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript實(shí)現(xiàn)模仿桌面窗口的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)模仿桌面窗口的方法,可實(shí)現(xiàn)模仿桌面窗口的打開、關(guān)閉、移動(dòng)、縮放及最大化、最小化等功能,需要的朋友可以參考下
2015-07-07
js實(shí)現(xiàn)交通燈效果
本文主要介紹了js實(shí)現(xiàn)交通燈效果的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
Javascript迭代、遞推、窮舉、遞歸常用算法實(shí)例講解
今天小編就為大家分享一篇關(guān)于Javascript迭代、遞推、窮舉、遞歸常用算法實(shí)例講解，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧
2019-02-02
淺析IE10兼容性問(wèn)題(frameset的cols屬性)
主頁(yè)用frameset嵌了兩個(gè)頁(yè)面，左側(cè)為菜單欄，可以通過(guò)改變 frameset的cols來(lái)收縮。別的瀏覽器正常，但I(xiàn)E10卻沒(méi)任何的反應(yīng)
2014-01-01
JavaScript之clipboard用法詳解
這篇文章主要介紹了JavaScript之clipboard用法詳解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
2021-08-08
JavaScript中數(shù)組reduce()方法使用詳情
這篇文章主要介紹了JavaScript中數(shù)組reduce()方法使用詳情，reduce()對(duì)數(shù)組中的每個(gè)元素進(jìn)行累加，返回一個(gè)新的值，可以傳入初始值，更多相關(guān)內(nèi)容需要的小伙伴可以參考一下下面文章介紹
2022-09-09
淺談JavaScript中的String對(duì)象常用方法
這篇文章主要介紹了JavaScript中的String對(duì)象常用方法,非常簡(jiǎn)單實(shí)用，有需要的小伙伴參考下
2015-02-02
stackoverflow常用工具庫(kù)總結(jié)
這篇文章主要為大家介紹了stackoverflow常用工具庫(kù)總結(jié)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-03-03
javascript面向?qū)ο笾x成員方法實(shí)例分析
這篇文章主要介紹了javascript面向?qū)ο笾x成員方法,實(shí)例分析了成員方法的定義與使用技巧,需要的朋友可以參考下
2015-01-01
JS的事件綁定深入認(rèn)識(shí)
類似于JQuery的這樣js庫(kù)已經(jīng)實(shí)現(xiàn)了很好的數(shù)據(jù)綁定機(jī)制的封裝效果，但只知其然，不知其所以然還有會(huì)有種蒙在鼓里的感覺，親自去分析一下具體的實(shí)現(xiàn)，會(huì)有一種豁然開朗的感覺
2014-06-06