资料文件上传图片预览功能

最新推荐文章于 2024-05-13 13:47:19 发布

转载最新推荐文章于 2024-05-13 13:47:19 发布 · 1.2k 阅读

本文介绍了一个简单的网页应用案例，该应用允许用户上传特定格式的图片文件，并立即在页面中预览所选图片。支持的图片格式包括jpg、jpeg、png、gif和bmp。通过JavaScript实现了文件选择事件监听及图片的预览功能。

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP 'aaa.jsp' starting page</title>
<script type="text/javascript">
function PreviewImage(imgFile) {
var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;
if (!pattern.test(imgFile.value)) {
alert("系统仅支持jpg/jpeg/png/gif/bmp格式的照片！");
imgFile.focus();
} else {
var path;
if (document.all){//IE
imgFile.select();
path = document.selection.createRange().text;
document.getElementById("imgPreview").innerHTML = "";
document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\""
+ path + "\")";//使用滤镜效果
} else {//火狐
path = URL.createObjectURL(imgFile.files[0]);
document.getElementById("imgPreview").innerHTML = "<img width='100px' height='100px' src='"+path+"'/>";
}
}
}
</script>
</head>

<body>
<input type="file" onchange='PreviewImage(this)' />
<div id="imgPreview" style='width:100px; height:100px;'></div>
</body>
</html>