js实现图片预览 
<%@ 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>

 

 posted on 2016-11-25 10:06  布诺  阅读(297)  评论(0)  编辑  收藏  举报