这篇文章主要介绍了HTML5图片预览实例,需要的朋友可以参考下。

HTML5图片预览需要用到两种方法

1.URL

2.FileReader

直接上代码

代码如下:

functionpreview1(file){

varimg=newImage(),url=img.src=URL.createObjectURL(file)

var$img=$(img)

img.onload=function(){

URL.revokeObjectURL(url)

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

}

}

functionpreview2(file){

varreader=newFileReader()

reader.onload=function(e){

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

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

}

reader.readAsDataURL(file)

}

$(function(){

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

varfile=e.target.files[0]

preview1(file)

})

})