jsp图片上传提交前，图片显示在页面上

原创于 2020-04-27 22:38:15 发布 · 657 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

javaweb 专栏收录该内容

108 篇文章

订阅专栏

本文介绍了一种在前端开发中实现图片上传预览的方法，通过JavaScript读取用户选择的图片，并将其显示在页面上，适用于各种基于Web的图片上传场景。

<divclass="upload_box">
<b>上传图片</b>
<inputtype="file"name="file"id="file" accept="image/*" onchange="imgChange(this);"/> <!--文件上传选择按钮-->
<divid="preview">
<imgid="imghead"src="/style/images/blank.gif"width="260"height="180" /> <!--图片显示位置-->
</div>
</div>


<scripttype="text/javascript">
// 选择图片显示
function imgChange(obj) {
//获取点击的文本框
var file =document.getElementById("file");
var imgUrl =window.URL.createObjectURL(file.files[0]);
var img =document.getElementById('imghead');
img.setAttribute('src',imgUrl); // 修改img标签src属性值
};
</script>

jsp图片上传提交前，图片显示在页面上jsp图片上传提交前，图片显示在页面上