快捷導(dǎo)航

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

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

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

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

<html>
<head>
<title>m.fzitv.net 圖片上傳預(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代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，可得如下運行效果：

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript運動效果與技巧匯總》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運算用法總結(jié)》

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

您可能感興趣的文章:

相關(guān)文章

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