在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意。要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的。幸运的是在这个项目以前有人写过一个图片预览的功能,还被我给翻了出来,在这里做个记录,方便自己以后用,也方便其他需要的朋友!
代码很简单,如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > <html xmlns= "http://www.w3.org/1999/xhtml" > <head> <meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> <title>By:DragonDean</title> <script type= "text/javascript" > //下面用于图片上传预览功能 function setImagePreview(avalue) { var docObj=document.getElementById( "doc" ); var imgObjPreview=document.getElementById( "preview" ); if (docObj.files &&docObj.files[0]) { //火狐下,直接设img属性 imgObjPreview.style.display = 'block' ; imgObjPreview.style.width = '150px' ; imgObjPreview.style.height = '180px' ; //imgObjPreview.src = docObj.files[0].getAsDataURL(); //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式 imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]); } else { //IE下,使用滤镜 docObj.select(); var imgSrc = document.selection.createRange().text; var localImagId = document.getElementById( "localImag" ); //必须设置初始大小 localImagId.style.width = "150px" ; localImagId.style.height = "180px" ; //图片异常的捕捉,防止用户修改后缀来伪造图片 try { localImagId.style.filter= "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)" ; localImagId.filters.item( "DXImageTransform.Microsoft.AlphaImageLoader" ).src = imgSrc; } catch (e) { alert( "您上传的图片格式不正确,请重新选择!" ); return false ; } imgObjPreview.style.display = 'none' ; document.selection.empty(); } return true ; } </script> </head> <body> <table width= "100%" border= "0" cellspacing= "0" cellpadding= "0" > <tbody> <tr> <td height= "101" align= "center" > <div id= "localImag" ><img id= "preview" src= "http://blog.chuangling.net/Public/images/top.jpg" width= "150" height= "180" style= "display: block; width: 150px; height: 180px;" ></div> </td> </tr> <tr> <td align= "center" style= "padding-top:10px;" ><input type= "file" name= "file" id= "doc" style= "width:150px;" onchange= "javascript:setImagePreview();" ></td> </tr> </tbody> </table> </body> </html> |
测试在IE8,FF12.0和谷歌chrome 28.0.1500.72都能用!