码迷,mamicode.com
首页 > Web开发 > 详细

上传图片预览(部分-百度找的)

时间:2015-07-06 19:20:14      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:

html:

1 <img id="img" src="https://www.baidu.com/img/baidu_jgylogo3.gif?v=35820489.gif" />
2 <input type="file" name="file" id="inp" />

css:

        img{
            display: block;
            width: 150px;
            height: 180px;
        }    

javascript:未完

 1         window.onload = function(){
 2             var img=document.getElementById("img");
 3             var inp=document.getElementById("inp");
 4 
 5             inp.onchange = function(){
 6                 setImagePreview(inp,img);
 7             };
 8 
 9             //下面用于图片上传预览功能
10             function setImagePreview(inp,img) {
11                 alert(inp.value);
12                 if(inp.files && inp.files[0])
13                 {
15                     //img.src = inp.files[0].getAsDataURL();
16                     //火狐7以上版本不能用上面的getAsDataURL()方式获取,需要一下方式
17                     img.src = window.URL.createObjectURL(inp.files[0]);
18                 }
19                 else
20                 {
21                     //IE下,使用滤镜
22                     inp.select();
23                     var imgSrc = document.selection.createRange().text;
24                     var localImagId = document.getElementById("localImag");
25                     //必须设置初始大小
26                     localImagId.style.width = "150px";
27                     localImagId.style.height = "180px";
28                     //图片异常的捕捉,防止用户修改后缀来伪造图片
29                     try{
30                         localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
31                         localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
32                     }
33                     catch(e)
34                     {
35                         alert("您上传的图片格式不正确,请重新选择!");
36                         return false;
37                     }
38                     img.style.display = ‘none‘;
39                     document.selection.empty();
40                 }
41                 return true;
42             }
43         };

 

上传图片预览(部分-百度找的)

标签:

原文地址:http://www.cnblogs.com/wmh1106/p/4624962.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!