input file 实现图片预览效果

来源：互联网发布：mysql数据库引擎编辑：程序博客网时间：2024/06/13 05:10

在项目中遇到用input标签file类型的文件上传，想实在上传之前进行图片的预览功能；之前的做的一个解决方案是文件先上传上去然后返回地址再显示在页面上，这样就不太好，因为用户基本信息可能并没有保存，但是头像却已经改变，如果在需要改变就导致了多余图片的保存服务器

在网上找了下解决方案，如下所示：

<!DOCTYPE HTML>

<html>

<head>

<title>html5 图片上传预览</title>

<style>

#preview {

width: 300px;

height: 300px;

overflow: hidden;

}

#preview img {

width: 100%;

height: 100%;

}

</style>

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 = $('<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)

})

</script>

</head>

<body>

</form>

</body>

</html>

这个只是一个demo，不过基本就是这样的；

1 0