JS图片的上传预览和表单提交(FileReader()方法)

一开始没有搞明白下面这块代码的,今天有时间简单整理下

核心点:FileReader()方法

以下是代码(以JSP文件为例)

<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
//上传-预览逻辑
$(".newspic").click(function() { //1.点击默认图片,出发标签<a>的click事件
$(this).next('input').click();//2.触发input的点击事件,用户选择图片进行上传
});
function showPic(data) {//3.当用户上传图片后,触发input标签的onchange事件,执行showPic()方法
if (data.files && data.files[0]) {//4.判断input标签的file是否存在
var reader = new FileReader();//5.实例化一个FileReader()接口
reader.readAsDataURL(data.files[0]);//6.通过readAsDataURL()方法读取文件,将图片内嵌在网页之中
reader.onload = function(evt) {//7.调用FileReader()的onload事件,当文件读取成功时,执行8
//8.将reader的result属性值赋值给data.parentNode.childNodes[1].childNodes[1].src,实现图片预览
data.parentNode.childNodes[1].childNodes[1].src = evt.target.result;
}
}
} //上传-提交保存逻辑
//用户选择图片,点击提交;将数据通过表单(name-value)提交给后台;注意:需要表单enctype="multipart/form-data";否则后台无法接受
</script>
</head>
<body>
<form action="hospital/saveHospital.do" name="editForm" method="post" enctype="multipart/form-data">
<a href="javascript:void(0)" class="newspic">
<!-- static/img/selectimg.png是默认图片,当reader读取完毕后,执行步骤8,即展示上传图片 -->
<img style="width:200px;height:100px;" src="static/img/selectimg.png"/>/
</a>
<input type="file" id="logoUrl" name="logoUrl" onchange="showPic(this)" style="display: none"/>
<button type="submit" >提交</button>
</form>
</body>
</html>

示例效果

项目总结07:JS图片的上传预览和表单提交(FileReader()方法)-LMLPHP

05-04 02:20