兼容主流浏览器和ie7的图片上传并显示 
 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style type="text/css">
 7         body{margin:0;padding:0;}
 8         img{vertical-align:bottom;}
 9     </style>
10 </head>
11 <body>
12 <input onchange="fileSelect(this)" type="file" multiple accept="image/gif,image/png,,image/jpeg" id="Files">
13 <div id="Preview"></div>
14 <!--<ul id="Errors"></ul>-->
15 <script>
16     function fileSelect(self) {
17         var p = document.getElementById('Preview');
18         if( self.files && self.files[0] ){
19             getImgSrc.otherBrowser(self, p);
20         }else if( p.filters ){
21             getImgSrc.ie78(self, p);
22         }
23     }
24 
25     var getImgSrc = {
26         otherBrowser: function(self,p){
27             var files = self.files||self.files[0];
28             var ireg = /image\/.*/i;
29             for(var i = 0, f; f = files[i]; i++) {
30                 if(!f.type.match(ireg)) {
31                     alert( f.name +'不是图片文件.' );
32                     continue;
33                 }
34 
35                 var reader = new FileReader();
36                 //读取文件内容
37                 reader.readAsDataURL(f);
38                 reader.onload = (function(file) {
39                     return function(e) {
40                         addImg(this.result,p);
41                     };
42                 })(f);
43             }
44         },
45         ie78:function(self,p){
46             if( !self.value.match( /.jpg|.gif|.png|.bmp/i ) ){
47                 alert('图片格式无效！');
48                 return false;
49             }
50             self.select();
51             var imgSrc = document.selection.createRange().text;
52             addImg(imgSrc,p);
53         }
54 
55     };
56     //        创建图片并追加
57     var addImg = function(url,p){
58         var img = new Image;
59         img.src=url;
60 
61         p.insertBefore(img, null);
62     }
63 </script>
64 </body>
65 </html>

 

posted on 2017-05-24 17:34  瑞诺拉  阅读(259)  评论(0)    收藏  举报