js实现图片预览

最新推荐文章于 2024-06-20 10:53:59 发布

weixin_30621919

最新推荐文章于 2024-06-20 10:53:59 发布

阅读量71

点赞数

文章标签： java javascript ViewUI

原文链接：http://www.cnblogs.com/bunuo/p/6100506.html

版权

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

转载于:https://www.cnblogs.com/bunuo/p/6100506.html

weixin_30621919

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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...
复制链接

扫一扫