js实现上传图片及时预览
01<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02<html xmlns="http://www.w3.org/1999/xhtml" >
03
04
05<head>
06<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
07<title>图片上传本地预览</title>
08<style type="text/css">
09#preview{width:260px;height:190px;border:1px solid #000;overflow:hidden;}
10#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
11</style>
12<script type="text/javascript">
13
14
15 //图片上传预览 IE是用了滤镜。
16 function previewImage(file)
17 {
18 var MAXWIDTH = 260;
19 var MAXHEIGHT = 180;
20 var div = document.getElementById('preview');
21 if (file.files && file.files[0])
22 {
23 div.innerHTML ='<img id=imghead>';
24 var img = document.getElementById('imghead');
25 img.onload = function(){
26 var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
27 img.width = rect.width;
28 img.height = rect.height;
29// img.style.marginLeft = rect.left+'px';
30 img.style.marginTop = rect.top+'px';
31 }
32 var reader = new FileReader();
33 reader.onload = function(evt){img.src = evt.target.result;}
34 reader.readAsDataURL(file.files[0]);
35 }
36 else //兼容IE
37 {
38 var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
39 file.select();
40 var src = document.selection.createRange().text;
41 div.innerHTML = '<img id=imghead>';
42 var img = document.getElementById('imghead');
43 img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
44 var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
45 status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
46 div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+""'></div>";
47 }
48 }
49 function clacImgZoomParam( maxWidth, maxHeight, width, height ){
50 var param = {top:0, left:0, width:width, height:height};
51 if( width>maxWidth || height>maxHeight )
52 {
53 rateWidth = width / maxWidth;
54 rateHeight = height / maxHeight;
55
56 if( rateWidth > rateHeight )
57 {
58 param.width = maxWidth;
59 param.height = Math.round(height / rateWidth);
60 }else
61 {
62 param.width = Math.round(width / rateHeight);
63 param.height = maxHeight;
64 }
65 }
66
67 param.left = Math.round((maxWidth - param.width) / 2);
68 param.top = Math.round((maxHeight - param.height) / 2);
69 return param;
70 }
71</script>
72</head>
73<body>
74<div id="preview">
75 <img id="imghead" style="display:none;" width=100 height=100 border=0 src='<%=request.getContextPath()%>/images/defaul.jpg'>
76</div>
77
78
79 <input type="file" onchange="previewImage(this)" />
80</body>
81</html>
