快捷導(dǎo)航

基于JavaScript FileReader上傳圖片顯示本地鏈接

更新時(shí)間：2016年05月27日 11:38:59 作者：小時(shí)光

這篇文章主要為大家詳細(xì)介紹了基于JavaScript FileReader上傳圖片顯示本地鏈接的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

簡(jiǎn)介

使用FileReader對(duì)象,web應(yīng)用程序可以異步的讀取存儲(chǔ)在用戶計(jì)算機(jī)上的文件(或者原始數(shù)據(jù)緩沖)內(nèi)容,可以使用File對(duì)象或者Blob對(duì)象來指定所要處理的文件或數(shù)據(jù).其中File對(duì)象可以是來自用戶在一個(gè)<input type="text" />元素上選擇文件后返回的FileList對(duì)象,也可以來自拖放操作生成的 DataTransfer對(duì)象,還可以是來自在一個(gè)HTMLCanvasElement上執(zhí)行mozGetAsFile()方法后的返回結(jié)果.

頁面中多個(gè)，上傳多個(gè)圖片DEMO代碼

<!Doctype html>
<html>
 <head>
 <title>上傳圖片顯示預(yù)覽圖</title>
 <style>
  #result img{
  height:100px;
  display:inline-block;
  margin-right:10px;
  margin-bottom:10px;
  }
 </style>
 </head>
 <body>
 <div class="add_imgs">
  <p> 
  <label>請(qǐng)選擇一個(gè)圖像文件：</label> 
  <input type="file" id="file_input" style="display:none;" /> 
  </p> 
  <div id="result">
  <a href="javascript:void(0);" class="add_img_btn">添加圖片</a>
  </div> 
 </div>
 <div class="add_imgs">
  <p> 
  <label>請(qǐng)選擇一個(gè)圖像文件：</label> 
  <input type="file" id="file_input" style="display:none;" /> 
  </p> 
  <div id="result">
  <a href="javascript:void(0);" class="add_img_btn">添加圖片</a>
  </div> 
 </div>
 <script src="jquery-2.2.1.min.js"></script>
 <script>
  $(".add_img_btn").unbind("click").on("click",function(){
  $(this).parents(".add_imgs").find("input[type=file]").click();
  var result = $(this).parent(); 
  var input = $(this).parents(".add_imgs").find("input[type=file]");
  dads(result,input);
  })
  
  
  function dads(result,input){
  if(typeof FileReader==='undefined'){ 
   result.innerHTML = "抱歉，你的瀏覽器不支持 FileReader"; 
   input.setAttribute('disabled','disabled'); 
  }else{ 
   $(input).unbind("change").on("change",function(){
   var file = this.files[0]; 
   if(!/image\/\w+/.test(file.type)){ 
    alert("文件必須為圖片！"); 
    return false; 
   } 
   var reader = new FileReader(); 
   reader.readAsDataURL(file); 
   reader.onload = function(e){ 
    $(result).append('<img src="'+this.result+'" alt="" />'); 
   } 
   })
  } 
  }
 </script>
 </body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家學(xué)習(xí)JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: