html5 图片预览 删除,HTML5图片预览实例分享

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

1.url

2.filereader

直接上代码

复制代码代码如下:

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)

})

})

其中url.revokeobjecturl方法opera不支持，filereader除ie9及以下不支持，其它浏览器都支持。