HTML上传预览图片
今天做一功能就是网页上传图片,可以实时预览.
选择图片之后,下面显示图片.
之前我是先ajax上传到服务器拿到图片URL.在显示在下面.但这样有一弊端.如果用户又替换了图片,那么之前那次上传的就白费了.
那如何实现不上传就能显示图片呢?
可以使用HTML5提供的FileReader文件API.
关于具体的FileReader使用可以在百度上搜索.
下面放出我实现的方法.仅供参考(我不是专业的前端工程师,样式直接用的Bootstrap,还用到了JQ)
<form action="" method="post" role="form" enctype="multipart/form-data">
<legend>添加轮播图</legend>
<div class="col-sm-12">
<div class="input-group">
<input type="file" name="file" id="file" onchange="upImagePc(this)" class="form-control" value="" title="" required="required">
</div>
<div class="input-group" style="margin-top:5px;">
<img src="/hdjs/static/image/nopic.jpg" id="image" class="img-responsive img-thumbnail" height="600">
</div>
</div>
<script>
function upImagePc(obj) {
var imgFile = obj.files[0];
console.log(imgFile);
var fr = new FileReader();
fr.onload = function() {
$('#image').attr('src',fr.result);
};
fr.readAsDataURL(imgFile);
}
</script>
<div class="col-sm-12" style="margin-top: 20px">
<button type="submit" class="btn btn-primary">保存</button>
</div>
</form>
看下效果:
很完美的实现了,无需上传实时预览的功能.
发表评论