JS实现图片上传之前先预览

2015/08/21 54347

清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>>

?
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
66
67
68
69
70
71
72
73
74
75
76
77
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript" src="jquery-1.8.1.min.js" > </script>
    <script type="text/javascript">
// 获取本地上传的照片路径 
function getPath(obj) { 
          if (obj) { 
              //ie 
              if (window.navigator.userAgent.indexOf("MSIE") >= 1) { 
                  obj.select(); 
                  // IE下取得图片的本地路径 
                  return document.selection.createRange().text; 
              } 
              //firefox 
              else if (window.navigator.userAgent.indexOf("Firefox") >= 1) { 
                  if (obj.files) { 
                      // Firefox下取得的是图片的数据 
                      return obj.files.item(0).getAsDataURL(); 
                  } 
                  return obj.value; 
              } 
              return obj.value; 
          } 
      } 
//显示图片
   
function previewPhoto(){ 
    var picsrc=getPath(document.all.fileid); 
    var picpreview=document.getElementById("preview"); 
    if(!picsrc){  
     return
    } 
    if(window.navigator.userAgent.indexOf("MSIE") >= 1) { 
         if(picpreview) { 
          try{ 
                 picpreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = picsrc; 
                }catch(ex){ 
           alert("文件路径非法，请重新选择！") ; 
           return false; 
          } 
     }else{  
        picpreview.innerHTML="<img src='"+picsrc+"' />"; 
     } 
   } 
} 
   
   
   
function preImg(fileid, imgid) {
    if (typeof FileReader == 'undefined') {
        var picsrc=getPath(document.all.fileid)
        $("#imgid").attr({ src: picsrc});
        previewPhoto();
    }
    else{
    var reader = new FileReader();
    var name=$("#fileid").val();
    var picpreview=document.getElementById("preview"); 
    reader.onload = function(e) {
        var img = document.getElementById(imgid);
        //img.src = this.result;
        picpreview.innerHTML="<img src='"+this.result+"' style='width: 179px; height: 189px;' />"; 
    }
    reader.readAsDataURL(document.getElementById(fileid).files[0]);
}
}
   
  </script>
 </head>
 <body>
 <div id="preview" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale); width:180px;height:190px;border:solid 1px black;"> 
   
<input type="file" id="fileid" name="photofile" onchange="preImg(this.id,'imgid');"/>
 </body>
</html>