JavaScript實(shí)現(xiàn)預(yù)覽本地上傳圖片功能完整示例

更新時(shí)間：2019年03月08日 10:53:15 作者：Bug開發(fā)攻城獅

這篇文章主要介紹了JavaScript實(shí)現(xiàn)預(yù)覽本地上傳圖片功能,結(jié)合完整實(shí)例形式分析了javascript圖片預(yù)覽相關(guān)的格式正則驗(yàn)證、瀏覽器判斷、頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

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

<html>
<head>
<title>www.dhdzp.com 圖片上傳預(yù)覽</title>
<script> 
  function PreviewImage(imgFile) {
    var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;
    if (!pattern.test(imgFile.value)) {
      alert("系統(tǒng)僅支持jpg/jpeg/png/gif/bmp格式的照片！");
      imgFile.focus();
    } else {
      var path;
      if (document.all) {//IE 
        imgFile.select();
        path = document.selection.createRange().text;
        document.getElementById("imgPreview").innerHTML = "";
        document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";//使用濾鏡效果 
      } else {//FF 
        path = URL.createObjectURL(imgFile.files[0]);
        document.getElementById("imgPreview").innerHTML = "<img src='"+path+"'/>";
      }
    }
  }
</script>
</head>
<body>
  <div>
    <input type="file" onchange='PreviewImage(this)' />
    <div id="imgPreview" style='width: 500px; height: 400px;'>
      <img src="" />
    </div>
  </div>
</body>
</html>

使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，可得如下運(yùn)行效果：

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

Javascript實(shí)現(xiàn)滾動(dòng)圖片新聞的實(shí)例代碼
這篇文章主要介紹了Javascript實(shí)現(xiàn)滾動(dòng)圖片新聞的實(shí)例代碼。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-11-11
hash和history路由模式區(qū)別示例解析
這篇文章主要為大家介紹了hash和history路由模式區(qū)別示例解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-07-07
Bootstrap每天必學(xué)之媒體對(duì)象
Bootstrap每天必學(xué)之媒體對(duì)象，對(duì)BootBootstrap每天必學(xué)之媒體對(duì)象小編也了解的很少，希望通過(guò)這篇文章和大家更多的去學(xué)習(xí)Bootstrap每天必學(xué)之媒體對(duì)象，從中得到收獲。
2015-11-11
JS?限時(shí)限次數(shù)點(diǎn)擊按鈕的實(shí)現(xiàn)思路
這篇文章主要介紹了JS?限時(shí)限次數(shù)點(diǎn)擊按鈕,實(shí)現(xiàn)方法很簡(jiǎn)單需要用一個(gè)變量作為計(jì)數(shù),點(diǎn)擊一次，計(jì)數(shù)加一點(diǎn)擊函數(shù)內(nèi)判斷計(jì)數(shù)變量設(shè)置定時(shí)恢復(fù)，對(duì)實(shí)例代碼感興趣的朋友一起看看吧
2022-03-03
javascript解決小數(shù)的加減乘除精度丟失的方案
這篇文章主要介紹了javascript解決小數(shù)的加減乘除精度丟失的方案的相關(guān)資料以及JavaScript中關(guān)于丟失數(shù)字精度的問題的探討，非常的詳細(xì),需要的朋友可以參考下
2016-05-05
JS監(jiān)聽和響應(yīng)DOM元素的變化的方法
在前端開發(fā)中,處理動(dòng)態(tài)變化的 DOM（文檔對(duì)象模型）很是常見的需求,比如自動(dòng)化測(cè)試中,可能需要監(jiān)控 DOM 變化來(lái)驗(yàn)證測(cè)試條件,在用戶填寫表單時(shí),某些字段需要即時(shí)驗(yàn)證等,所以本文給大家介紹了JS監(jiān)聽和響應(yīng)DOM元素的變化的方法,需要的朋友可以參考下
2024-09-09
淺談JavaScript中promise的使用
本文主要對(duì)JavaScript中promise的使用進(jìn)行詳細(xì)介紹。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-01-01
圖片文字識(shí)別（OCR）插件Ocrad.js教程
這篇文章主要為大家詳細(xì)介紹了圖片文字識(shí)別（OCR）插件Ocrad.js教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-11-11
微信用戶訪問小程序的登錄過(guò)程詳解
這篇文章主要介紹了微信用戶訪問小程序的登錄過(guò)程詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
ES6的Fetch異步請(qǐng)求的實(shí)現(xiàn)方法
這篇文章主要介紹了ES6的Fetch異步請(qǐng)求的實(shí)現(xiàn)方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-12-12