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

創(chuàng)新互聯(lián)公司主營清鎮(zhèn)網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,重慶APP開發(fā)公司,清鎮(zhèn)h5微信平臺小程序開發(fā)搭建,清鎮(zhèn)網(wǎng)站營銷推廣歡迎清鎮(zhèn)等地區(qū)企業(yè)咨詢

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

直接上代碼：

html部分

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

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

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

 //如果支持就監(jiān)聽改變事件，一旦改變了就運行readFile函數(shù)。 
 } 
 
 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); //調(diào)用readAsDataURL方法來讀取選中的圖像文件 
 //最后在onload事件中，獲取到成功讀取的文件內(nèi)容，并以插入一個img節(jié)點的方式顯示選中的圖片 
 reader.onload = function(e) { 
 // 創(chuàng)建一個新增的圖片和文字input 
 var figure = $('<div class="figure"><div class="figure-hd">我的頭部</div><div class="figure-bd"><img src="' + this.result + '" /><textarea placeholder="請輸入文字"></textarea></div></div>'); 
 figure.appendTo(figureBox); 
 } 
 } 
 } 
}

以上是“Html5怎么實現(xiàn)上傳本地圖片并預(yù)覽功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前題目：Html5怎么實現(xiàn)上傳本地圖片并預(yù)覽功能
URL鏈接：http://aaarwkj.com/article0/jjgioo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、商城網(wǎng)站、響應(yīng)式網(wǎng)站、網(wǎng)站建設(shè)、網(wǎng)站改版、軟件開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)