快捷導(dǎo)航

簡(jiǎn)單實(shí)現(xiàn)JS上傳圖片預(yù)覽功能

更新時(shí)間：2017年04月14日 11:28:46 作者：daodanxiong

這篇文章主要為大家詳細(xì)介紹了如何簡(jiǎn)單實(shí)現(xiàn)JS上傳圖片預(yù)覽功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

js實(shí)現(xiàn)上傳圖片預(yù)覽功能思路是獲取上傳圖片本地路徑，再加載到頁面中實(shí)現(xiàn)上傳預(yù)覽

HTML代碼

<div class="upload">
    <input type="button" class="btn" onclick="browerfile.click()" value="上傳">
    <input type="file" id="browerfile" style="display: none;" class="test">
    <div class="img_center">
      <img src="" class="img1-img">
    </div>
  </div>

實(shí)現(xiàn)功能的js代碼

//獲取圖片路勁的方法，兼容多種瀏覽器，通過createObjectURL實(shí)現(xiàn)
function getObjectURL(file){
  var url = null;
  if(window.createObjectURL != undefined){
    url = window.createObjectURL(file);//basic
  }else if(window.URL != undefined){
    url = window.URL.createObjectURL(file);
  }else if(window.webkitURL != undefined){
    url = window.webkitURL.createObjectURL(file);
  }

  return url;
}

//實(shí)現(xiàn)功能代碼
$(function(){
  $("#browerfile").change(function(){
    var path = browerfile.value;
    var objUrl = getObjectURL(this.files[0]);
    if(objUrl){
      $('.img1-img').attr("src",objUrl);
    }
  })
})

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

您可能感興趣的文章:

相關(guān)文章

利用JS判斷字符串是否含有數(shù)字與特殊字符的方法小結(jié)
在我們?nèi)粘９ぷ鞯臅r(shí)候，利用javaScript判斷一個(gè)字符串中是否包括有數(shù)字和"-"，在一些表單提交的地方，這是比較有用的常規(guī)判斷，這里收集有幾種不同的方法，最后還將簡(jiǎn)要介紹下isNAN函數(shù)的使用方法和例子，有需要的朋友們可以參考借鑒，下面來一起看看吧。
2016-11-11
js實(shí)現(xiàn)倒計(jì)時(shí)關(guān)鍵代碼
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)倒計(jì)時(shí)的關(guān)鍵代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
移動(dòng)端H5頁面返回并刷新頁面（BFcache）的方法
這篇文章主要給大家介紹了關(guān)于移動(dòng)端H5頁面返回并刷新頁面（BFcache）的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2018-11-11
JavaScript箭頭函數(shù)中的this詳解
這篇文章主要介紹了JavaScript箭頭函數(shù)中的this詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，,需要的朋友可以參考下
2019-06-06
關(guān)于javascript event flow 的一個(gè)bug詳解
描述了firefox，safari 有一個(gè)bug和DOM 3 規(guī)范不一致：在event.currentTarget等于event.target的時(shí)候（即event flow處于target phase時(shí)），會(huì)調(diào)用添加到currentTarget上的useCapture為true的listener
2013-09-09
JS OOP包機(jī)制,類創(chuàng)建的方法定義
JS OOP包機(jī)制,類創(chuàng)建的方法定義,需要的朋友可以參考下。
2009-11-11
javascript結(jié)合ajax讀取txt文件內(nèi)容
這篇文章主要介紹了javascript結(jié)合ajax讀取txt文件內(nèi)容，方法非常簡(jiǎn)單，很實(shí)用，這里推薦給大家
2014-12-12
簡(jiǎn)述JS瀏覽器的三種彈窗
本文給大家簡(jiǎn)單介紹了JS瀏覽器的三種彈窗，簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-07-07
JavaScript 函數(shù)用法詳解【函數(shù)定義、參數(shù)、綁定、作用域、閉包等】
這篇文章主要介紹了JavaScript 函數(shù)用法,結(jié)合實(shí)例形式分析了JavaScript函數(shù)定義、參數(shù)、綁定、作用域、閉包、回調(diào)函數(shù)、柯理化函數(shù)等相關(guān)概念、原理與操作注意事項(xiàng),需要的朋友可以參考下
2020-05-05
用js控制電燈開關(guān)
這篇文章主要為大家詳細(xì)介紹了用js控制電燈開關(guān)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-04-04