图片上传并进行图片的回显

代码（图片上传后进行回显，并且对图片格式以及大小有限制；以下图片回显的代码是在网上找的现成的，然后自己添加了一些判断）：

 1          //图片上传预览    IE是用了滤镜。
 2         function previewImage(file){   
 3             var pic = document.getElementById("mtz").files;//注意这个的使用，它有很多属性：路径、图片大小等等。
 4             var picName = pic[0].name;
 5             var picPath = $("#mtz").val();
 6             //console.log("picPath=="+picPath);//C:\fakepath\442030560510107.JPEG
 7             var format = picName.split(".");
 8             var formatPic = format[format.length-1];
 9             //alert("formatPic="+formatPic);
10             formatPic = formatPic.toLocaleUpperCase(); 
11             //console.log("formatPic="+formatPic);
12             if(formatPic != "JPG"&& formatPic != "JPEG" && formatPic != "GIF" && formatPic != "PNG" && formatPic != "BMP" && formatPic != "TIFF"){
13                 alert("图片格式不正确！");
14                 $("#preview").css("display","none");
15                 $("#mtz").val("");
16                 return false;
17             }
18             
19              
20                //console.log("aa="+pic); 
21              //console.log("path="+pic[0]);//路径
22              //console.log("size="+pic[0].size);//142802
23              var size = pic[0].size;
24              var Max_Size = 2000;
25              var maxSize = Max_Size;
26              maxSize = maxSize * 1024;   //转化为字节
27              //isAllow = size <= maxSize;
28              
29              if(size > maxSize){
30                  alert("上传图片过大，无法上传!");
31                  $("#preview").css("display","none");
32                  $("#mtz").val("");
33                  return false;
34              }
35                      
36          
37                     
38           $("#preview").css("display","block");         
39           var MAXWIDTH  = 260; 
40           var MAXHEIGHT = 180;
41           var div = document.getElementById('preview');//回显框
42           if (file.files && file.files[0]){
43               div.innerHTML ='<img id=imghead>';
44               var img = document.getElementById('imghead');
45               img.onload = function(){
46                 var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
47                 img.width  =  rect.width;
48                 img.height =  rect.height;
49 //                 img.style.marginLeft = rect.left+'px';
50                 img.style.marginTop = rect.top+'px';
51               }
52               var reader = new FileReader();
53               reader.onload = function(evt){img.src = evt.target.result;}
54               reader.readAsDataURL(file.files[0]);
55           }else{ //兼容IE
56             var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
57             file.select();
58             var src = document.selection.createRange().text;
59             div.innerHTML = '<img id=imghead>';
60             var img = document.getElementById('imghead');
61             img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
62             var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
63             status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
64             div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
65           }
66           
67          
68           
69             var picName = $("#mtz").val();
70             $(".wjmc").val(picName);
71           
72          
73          } 
74         function clacImgZoomParam( maxWidth, maxHeight, width, height ){
75             var param = {top:0, left:0, width:width, height:height};
76             if( width>maxWidth || height>maxHeight )
77             {
78                 rateWidth = width / maxWidth;
79                 rateHeight = height / maxHeight;
80                  
81                 if( rateWidth > rateHeight )
82                 {
83                     param.width =  maxWidth;
84                     param.height = Math.round(height / rateWidth);
85                 }else
86                 {
87                     param.width = Math.round(width / rateHeight);
88                     param.height = maxHeight;
89                 }
90             }
91              
92             param.left = Math.round((maxWidth - param.width) / 2);
93             param.top = Math.round((maxHeight - param.height) / 2);
94             return param;
95         }
96         
 1 #simplemodal-container{
 2    width:700px !important;
 3 }
 4 tr{
 5   white-space:nowrap;
 6 }
 7 #preview{
 8    width:204px;
 9    height:173px;
10    margin-left:12px;
11    border:1px solid #000;
12    overflow:hidden;
13    background:#fff;
14    border: 2px solid #b6cddc;
15    border-radius: 4px;
16    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) inset;
17    }
18 #imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
19 .zn{
20    display:none;
21 }

 注意： 

     1、要给提交的那个form加enctype="multipart/form-data"，一定！！！

     2、后端需要图片的名称和路径。

posted on 2018-01-12 16:51  sun618  阅读(698)  评论(0)    收藏  举报