<%@ 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="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>