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及以下不支持，其它浏览器都支持。