如何给上传的图片添加一个简单的预览功能
程序员文章站
2022-04-08 16:47:29
...
下面是index.jsp页面：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>上传Excel表格测试</title>
<script src="js/jquery-1.12.4.js"></script>
</head>
<body>
<h3>测试</h3>
<form action="UpdFile?opr=getParam" enctype="multipart/form-data"
method="post">
上传图片:<input type="file" value="选择文件" name="fName" id="userface" onchange="preview(this)"><br>
<div id="preview"></div>
<input type="submit" value="提交" id="button">
</form>
</body>
需要添加一个事件οnchange="preview(this)"和一个展示图片的div，
，当选中图片的时候触发事件显示在div中：下面是关键的οnchange=“preview(this)”：
<script>
function preview(file) {
var prevDiv = document.getElementById('preview');
if (file.files && file.files[0]) {
var reader = new FileReader();
reader.onload = function (evt) {
prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
}
reader.readAsDataURL(file.files[0]);
} else {
prevDiv.innerHTML = '<div class="img" width="100" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
}
}
</script>
大家可以自己尝试一下，有很多种方法都可以实现加载图片的效果的！