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

来源：互联网发布：程控切纸机编程表编辑：程序博客网时间：2024/05/28 15:07

<%@ 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.onload=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>

阅读全文

0 0