<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<center>
<form action="" method="post" enctype="multipart/form-data">
<img alt="" src="" id="ImgPr" style="width:100:px;height:150px;">
<br>
<input type="file" name="file" id="inputFile" onchange="checkimage()" >
</form>
<script type="text/javascript">
//检查是否上传图片
function checkimage(){
var f=document.getElementById("inputFile").value;
if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(f)){
alert("图片类型必须是.gif,jpeg,jpg,png中的一种");
}else{
previewFile();
}
}
//图片预览功能
function previewFile() {
var preview = document.getElementById("ImgPr");
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "images/defaultImg.jpg";
}
}
</script>
</center>
</body>
</html>