本文實(shí)例講述了JS+HTML5實(shí)現(xiàn)上傳圖片預(yù)覽效果。分享給大家供大家參考，具體如下：

在項(xiàng)目中遇到用input標(biāo)簽file類型的文件上傳，想實(shí)在上傳之前進(jìn)行圖片的預(yù)覽功能；之前的做的一個(gè)解決方案是文件先上傳上去然后返回地址再顯示在頁面上，這樣就不太好，因?yàn)橛脩艋拘畔⒖赡懿]有保存，但是頭像卻已經(jīng)改變，如果在需要改變就導(dǎo)致了多余圖片的保存服務(wù)器。

在網(wǎng)上找了下解決方案，如下所示：

html5 圖片上傳預(yù)覽

#preview {

width: 300px;

height: 300px;

overflow: hidden;

}

#preview img {

width: 100%;

height: 100%;

}

function preview1(file) {

var img = new Image(), url = img.src = URL.createObjectURL(file)

var $img = $(img)

img.onload = function() {

URL.revokeObjectURL(url)

$('#preview').empty().append($img)

}

}

function preview2(file) {

var reader = new FileReader()

reader.onload = function(e) {

var $img = $('').attr("src", e.target.result)

$('#preview').empty().append($img)

}

reader.readAsDataURL(file)

}

$(function() {

$('[type=file]').change(function(e) {

var file = e.target.files[0]

preview1(file)

})

})

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript+HTML5特效與技巧匯總》、《JavaScript圖片操作技巧大全》、《JavaScript圖形繪制技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

時(shí)間： 2017-04-19

總結(jié)

以上是生活随笔為你收集整理的上传图片显示扫描效果html5,JS+HTML5实现上传图片预览效果完整实例【测试可用】...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。