H5怎么實現上傳本地圖片并能夠預覽的功能

小編給大家分享一下H5怎么實現上傳本地圖片并能夠預覽的功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

最近工作中需要H5上傳顯示圖片的功能，如圖：

直接上代碼：

html部分

<p class="works-wrap"> 
 <p class="figure-box" id="figure_box"></p> 
 <p class="add-btn"> 
  <input type="file" id="imgUploadBtn" /> 
  <a href="javascript:void(0);" rel="external nofollow" ><i></i>添加作品</a></p> 
 </p> 
</p>

我這邊用css將input[type=file] 設置成了opticy:0; 這樣可以看起來更像原生的上傳。

var addWork = { 
 add: function(btn, figure_box) { 
 var figureBox = document.getElementById(figure_box); //獲取顯示圖片的p元素 
 var input = document.getElementById(btn); //獲取選擇圖片的input元素 
 //這邊是判斷本瀏覽器是否支持這個API。 
 if (typeof FileReader === 'undefined') { 
  alert("瀏覽器版本過低，請先更新您的瀏覽器~"); 
  input.setAttribute('disabled', 'disabled'); 
 } else { 
  input.addEventListener('change', readFile, false); 

 //如果支持就監聽改變事件，一旦改變了就運行readFile函數。 
 } 
 
 function readFile() { 
  var file = this.files[0]; //獲取file對象 
  //判斷file的類型是不是圖片類型。 
  if (!/image\/\w+/.test(file.type)) { 
  alert("請上傳一張圖片~"); 
  return false; 
  } 
 
  var reader = new FileReader(); //聲明一個FileReader實例 
  reader.readAsDataURL(file); //調用readAsDataURL方法來讀取選中的圖像文件 
  //最后在onload事件中，獲取到成功讀取的文件內容，并以插入一個img節點的方式顯示選中的圖片 
  reader.onload = function(e) { 
  // 創建一個新增的圖片和文字input 
  var figure = $('<p class="figure"><p class="figure-hd">我的頭部</p><p class="figure-bd"><img src="' + this.result + '" /><textarea placeholder="請輸入文字"></textarea></p></p>'); 
  figure.appendTo(figureBox); 
  } 
 } 
 } 
}

以上是H5怎么實現上傳本地圖片并能夠預覽的功能的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！