欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

簡單實現(xiàn)JS上傳圖片預覽功能

 更新時間：2017年04月14日 11:28:46   作者：daodanxiong  
這篇文章主要為大家詳細介紹了如何簡單實現(xiàn)JS上傳圖片預覽功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

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>

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

//獲取圖片路勁的方法，兼容多種瀏覽器，通過createObjectURL實現(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;
}

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

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

相關(guān)文章

最新評論