使用js完成页面上的上传图片预览

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用js完成页面上的上传图片预览相关的知识,希望对你有一定的参考价值。

一 单张图片预览

1,首先我们要设计一个页面,如image.jsp(随你,这里是这个jsp页面)

<body >
<div>
<input type="file" id="picture" name="picture"/>
</div>
<div>
<img alt="图片预览" src="" id="showHeadImg">
</div>
</body>

<script type="text/javascript">
$(function(){
$("#picture").bind("change",function() {
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(this.files[0]);
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(this.files[0]);
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(this.files[0]);
}
console.log(this.files[0]);
$("#showHeadImg").attr("src",url);
});
});
</script>

页面代码如上:效果图如下:

技术分享

 

技术分享

当然这里面图片的大小是可以调整的,这个就留给读者了,嘿嘿嘿!

 

二 多张图片预览

1,同样你也需要个界面,就还有上面的界面好了

界面代码如下:

js:

$("#photo").bind("change",function(){
var url = null;
if (window.createObjectURL != undefined) {
url = window.createObjectURL(this.files[0]);
} else if (window.URL != undefined) {
url = window.URL.createObjectURL(this.files[0]);
} else if (window.webkitURL != undefined) {
url = window.webkitURL.createObjectURL(this.files[0]);
}
var content = ‘<div>‘
+ ‘<img src="‘ + url + ‘" style="width:251px;height:250px"></div>‘
+ ‘<div id="delPhoto"><span">删除</span></div>‘
+ ‘‘;
$("#photos").append(content);
$("#delPhoto").click(function() {
$(this).parent().remove();
});
})

 页面:

<div>
<input type="file" id="photo" name="photo"/>
</div>

<div>
<ul id="photos">

</ul>
</div>

效果如图:

技术分享

页面样式非常简陋,不喜勿喷啊!

 

以上是关于使用js完成页面上的上传图片预览的主要内容,如果未能解决你的问题,请参考以下文章

上传图片时预览

js之上传文件多图片预览

html + js 实现图片上传,压缩,预览及图片压缩后得到Blob对象继续上传问题

文件上传-------头像上传预览

js前端实现多图图片上传预览

js:s上次预览,上传图片预览,图片上传预览