H5怎么實(shí)現(xiàn)上傳本地圖片并能夠預(yù)覽的功能
小編給大家分享一下H5怎么實(shí)現(xiàn)上傳本地圖片并能夠預(yù)覽的功能，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
創(chuàng)新互聯(lián)建站是一家專業(yè)提供魯?shù)槠髽I(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站制作、做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)、HTML5建站、小程序制作等業(yè)務(wù)。10年已為魯?shù)楸姸嗥髽I(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設(shè)計(jì)公司優(yōu)惠進(jìn)行中。
最近工作中需要H5上傳顯示圖片的功能，如圖：
直接上代碼：
html部分
我這邊用css將input[type=file] 設(shè)置成了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);
//如果支持就監(jiān)聽改變事件，一旦改變了就運(yù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實(shí)例
reader.readAsDataURL(file); //調(diào)用readAsDataURL方法來讀取選中的圖像文件
//最后在onload事件中，獲取到成功讀取的文件內(nèi)容，并以插入一個img節(jié)點(diǎn)的方式顯示選中的圖片
reader.onload = function(e) {
// 創(chuàng)建一個新增的圖片和文字input
var figure = $('我的頭部
');
figure.appendTo(figureBox);
}
}
}
}以上是H5怎么實(shí)現(xiàn)上傳本地圖片并能夠預(yù)覽的功能的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
當(dāng)前名稱：H5怎么實(shí)現(xiàn)上傳本地圖片并能夠預(yù)覽的功能
轉(zhuǎn)載源于：http://m.jiaotiyi.com/article/iijcch.html