<!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>

實現(xiàn)要點

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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