js实现上传图片的及时预览

最新推荐文章于 2021-12-28 09:21:07 发布

林深不见鹿ee

最新推荐文章于 2021-12-28 09:21:07 发布

阅读量372

点赞数

分类专栏： js 文章标签： java web 图片及时预览

本文链接：https://blog.csdn.net/linshenshijianlu/article/details/77628408

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<%@ 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>上传照片预览</title>
<style type="text/css">
  #preview,.img,img{
    width:200px;
    height:200px;
  }
  #preview{
   border:1px solid #000; 
  }
</style>
</head>
<body>
 <div id="preview"></div>
 <input type="file" onChange="preview(this)"/>
 <script type="text/javascript">
   function preview(file){
	  var prevDiv=document.getElementById('preview');
	  if(file.files&&file.files[0]){
		  var reader=new FileReader();
		  reader.οnlοad=function(evt){
			  prevDiv.innerHTML='<img src="'+evt.target.result+'"/>';
		  }
		  reader.readAsDataURL(file.files[0]);
	  }else{
		  prevDiv.innerHTML='<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader">'; 
	  }
   }
 </script>
</body>
</html>

林深不见鹿ee

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现上传图片的及时预览

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>上传照片预览 #preview,.img,img{ width:200px; height:200px; } #preview{ border:1px solid #000;
复制链接

扫一扫

专栏目录