快捷導(dǎo)航

JS+HTML5實現(xiàn)圖片在線預(yù)覽功能

更新時間：2017年07月22日 08:58:15 作者：啊宏ahong

這篇文章主要為大家詳細(xì)介紹了JS+HTML5實現(xiàn)圖片在線預(yù)覽功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了HTML5圖片在線預(yù)覽的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html>
<head>
  <title>HTML5圖片預(yù)覽</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <script src="http://img9.tongzhuo100.com/js/jquery-1.7.2.min.js"></script>
  <style>
    .hide
    {
      display:none;
    }
  </style>
</head>
<body>
<h3>請選擇一張JPG/GIF的圖片</h3>
<form name="form0" id="form0" >
  <input type="file" name="file0" id="file0" multiple="multiple" />
  <br><br><img src="" id="img0" width="120" class="hide">
</form>
<script>
  $("#file0").change(function(){
    var objUrl = getObjectURL(this.files[0]) ;
    console.log("objUrl = "+objUrl) ;
    if (objUrl) 
    {
      $("#img0").attr("src", objUrl);
      $("#img0").removeClass("hide");
    }
  }) ;
  function getObjectURL(file) 
  {
    var url = null ;
    if (window.createObjectURL!=undefined) 
    { // basic
      url = window.createObjectURL(file) ;
    }
    else if (window.URL!=undefined) 
    {
      // mozilla(firefox)
      url = window.URL.createObjectURL(file) ;
    } 
    else if (window.webkitURL!=undefined) {
      // webkit or chrome
      url = window.webkitURL.createObjectURL(file) ;
    }
    return url ;
  }
</script>
</body>
</html>

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

您可能感興趣的文章:

相關(guān)文章

Table隔行變色的JavaScript代碼
用js實現(xiàn)的table隔行變色，鼠標(biāo)放上去有變色顯示，需要的朋友可以參考下。
2011-01-01
驅(qū)動事件的addEvent.js代碼
驅(qū)動事件的addEvent.js代碼...
2007-03-03
js中幾種循環(huán)的退出方式實例總結(jié)
提到在一段程序中如果碰到需要終止,結(jié)束一個循環(huán),函數(shù)或者一段代碼,一般會想到以下這幾個關(guān)鍵字return、continue、break,這篇文章主要給大家介紹了關(guān)于js中幾種循環(huán)的退出方式,需要的朋友可以參考下
2022-12-12
Javascript 是你的高階函數(shù)(高級應(yīng)用)
這篇文章主要介紹了Javascript 是你的高階函數(shù) ,需要的朋友可以參考下
2015-06-06
javaScript 實現(xiàn)重復(fù)輸出給定的字符串的常用方法小結(jié)
這篇文章主要介紹了javaScript 實現(xiàn)重復(fù)輸出給定的字符串的常用方法,總結(jié)分析了JavaScript重復(fù)輸出給定字符串的4種常見操作技巧,需要的朋友可以參考下
2020-02-02
JavaScript深入理解系列之call與apply
Function.prototype.call和Function.prototype.apply都是非常常用的方法,它們的作用一模一樣,區(qū)別僅在于傳入?yún)?shù)形式的不同,下面這篇文章主要介紹了JavaScript深入理解系列之call與apply的相關(guān)資料,需要的朋友可以參考下
2022-04-04
JS實現(xiàn)點擊上移下移LI行數(shù)據(jù)的方法
這篇文章主要介紹了JS實現(xiàn)點擊上移下移LI行數(shù)據(jù)的方法,涉及javascript針對LI列表動態(tài)排序的相關(guān)實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08
JS實現(xiàn)遠(yuǎn)程控制的基本原理和實現(xiàn)方法
遠(yuǎn)程控制是指通過網(wǎng)絡(luò)等遠(yuǎn)距離通訊手段控制另一設(shè)備的操作行為，在現(xiàn)實生活中，隨著物聯(lián)網(wǎng)技術(shù)的不斷發(fā)展，遠(yuǎn)程控制技術(shù)越來越重要，本文將詳細(xì)介紹?JS?實現(xiàn)遠(yuǎn)程控制的基本原理、開發(fā)流程和實現(xiàn)方法,需要的朋友可以參考下
2023-06-06
js點擊任意區(qū)域彈出層消失實現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了js點擊任意區(qū)域彈出層消失實現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
JS判斷元素為數(shù)字的奇異寫法分享
JS判斷元素為數(shù)字的奇異寫法分享，需要的朋友可以參考下
2012-08-08