图片上传 纯js编码

ie8测试始终不支持，非ie方法一、二都正常

 1 <!DOCTYPE html>
 2 <html lang="zh">
 3 
 4     <head>
 5         <meta charset="UTF-8" />
 6         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7         <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 8         <title>Document</title>
 9         <style type="text/css">
10             img {
11                 width: 200px;
12                 height: 100px;
13             }
14             .m-top{
15                 margin-top: 10px;
16             }
17         </style>
18         <script type="text/javascript">
19             function PreviewImage(file) {
20                 var filextension = file.value.substring(file.value.lastIndexOf("."), file.value.length);
21                 filextension = filextension.toLowerCase();
22                 if((filextension != '.jpg') && (filextension != '.gif') && (filextension != '.jpeg') && (filextension != '.png') && (filextension != '.bmp')) {
23                     alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !");
24                     file.focus();
25                 } else {
26                     var url;
27                     if (file.files && file.files[0]){
28                         /*
29                         // 方法一：FileReader API实现本地图片预览
30                         var file = file.files[0];
31                         //创建一个FileReader对象
32                         var reader = new FileReader();
33                         //读取file文件；
34                         reader.readAsDataURL(file);
35                         //当文件读取成功后，将结果保存到url变量里；
36                         reader.onload = function(evt) {
37                             url = evt.target.result;
38                             document.getElementById('img').src = url;
39                         }
40 */ 
41                         //url = file.files[0].getAsDataURL();// FF 3.0  
42                         //document.getElementById("img").src = url;
43                         
44                          
45                         // 方法二：HTML5 URL API
46                         url=window.URL.createObjectURL(file.files[0]);// FF 7.0以上 
47                         document.getElementById("imgPreview").innerHTML = "<img id='img' src='"+url+"'/>";  
48                         
49                     } else { 
50                         // 兼容IE9及以下
51                         //获取上传文件控件的值；
52                         file.select();  
53                         url = document.selection.createRange().text;  
54                         document.getElementById("imgPreview").innerHTML="";  
55                         document.getElementById("imgPreview").style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + url + "\")";//使用滤镜效果        
56                     }
57                 }
58             }
59         </script>
60     </head>
61 
62     <body>
63         <input id="fileItem" type="file" onchange='PreviewImage(this)' />
64         <div id="imgPreview" class="m-top" style='width:200px; height:100px;'>
65             <img src="" id="img" alt="pic" />
66         </div>
67     </body>
68 
69 </html>

 

posted @ 2017-09-04 17:18  微笑的小小向日葵  阅读(162)  评论(0)  编辑  收藏  举报