javascript即时显示上传缩略图

竹林书屋@ 2012-04-30

展开全文

01<html>
02<head>
03<meta content="text/html; charset=utf-8" http-equiv=content-type>
04<meta name=author content="Laruence(www.laruence.com)">
05<title>即时显示上传缩略图</title>
06</head>
07<body style="text-align:center;">
08<div>
09<div style="width:200px; height:200px; border:1px solid #666;"><img id="img"  style="visibility:hidden;" height="100%" width="100%"></div>
10<div style="margin-top:8px;"><input id="file" type="file" onChange="preivew(this,'img');"></div>
11</div>
12<script language="javascript" type="text/javascript">
13var allowExt = ['jpg', 'gif', 'bmp', 'png', 'jpeg'];
14var preivew = function(file, container){
15    try{
16        var pic =  new Picture(file, document.getElementById(container));
17    }catch(e){
18        alert(e);
19    }
20}
21//缩略图类定义
22var Picture  = function(file, container){
23    var height = 0,
24    widht  = 0,
25    ext    = '',
26    size   = 0,
27    name   = '',
28    path   =  '';
29    var self   = this;
30    if(file){
31        name = file.value;
32        if(window.navigator.userAgent.indexOf("MSIE")>=1){
33            file.select();
34            path = document.selection.createRange().text;
35        }else if(window.navigator.userAgent.indexOf("Firefox")>=1){
36            if(file.files){
37                path =  file.files.item(0).getAsDataURL();
38            }else{
39                path = file.value;
40            }
41        }
42    }else{
43        throw '无效的文件';
44    }
45    ext = name.substr(name.lastIndexOf("."), name.length);
46    if(container.tagName.toLowerCase() != 'img'){
47        throw '不是一个有效的图片容器';
48        container.visibility = 'hidden';
49    }
50    container.src = path;
51    container.alt = name;
52    container.style.visibility = 'visible';
53    height = container.height;
54    widht  = container.widht;
55    size   = container.fileSize;
56    this.get = function(name){
57        return self[name];
58    }
59    this.isValid = function(){
60        if(allowExt.indexOf(self.ext) !== -1){
61            throw '不允许上传该文件类型';
62            return false;
63        }
64    }
65}
66</script>
67</body>
68</html>