js实现上传图片即刻预览
日期：2014-05-16 浏览次数：20479 次
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.Alpha
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.Alpha
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
