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

最新推荐文章于 2024-07-10 02:47:11 发布

huangsong_Java

最新推荐文章于 2024-07-10 02:47:11 发布

阅读量1.1k

点赞数

<%@ 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" οnchange='PreviewImage(this)' />
<div id="imgPreview" style='width:100px; height:100px;'></div>
</body>
</html>