本文實例講述了JS+HTML5實現上傳圖片預覽效果。分享給大家供大家參考，具體如下：

在項目中遇到用input標簽file類型的文件上傳，想實在上傳之前進行圖片的預覽功能；之前的做的一個解決方案是文件先上傳上去然后返回地址再顯示在頁面上，這樣就不太好，因為用戶基本信息可能并沒有保存，但是頭像卻已經改變，如果在需要改變就導致了多余圖片的保存服務器。

在網上找了下解決方案，如下所示：

html5 圖片上傳預覽

#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)

})

})

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript+HTML5特效與技巧匯總》、《JavaScript圖片操作技巧大全》、《JavaScript圖形繪制技巧總結》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

時間： 2017-04-19

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。