HTML

1
2
3
4
5
6
7
8
9
10
< div  class = "form-group" >
     < label  class = "col-sm-3 col-sm-6 control-label" >图片</ label >
     < span  class = "problem-must" ></ span >
     < div  class = "col-sm-8" >
         < a  class = "fb-upload"  href = "javascript:void(0);" > 
             < input  class = "form-control"  name = "pic"  type = "file"  accept = ".gif,.jpg,.png,.jpeg"  /> 
             < span  class = "fb-img" >上传图片</ span >
     </ a >
     </ div >
</ div >

css（仿bootstrap的input样式）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.fb-img{ 
     color :  gray ;
     display : inline- block ;
     padding :  6px  12px ;
     text-align :  left ;
     border : 1px  solid  #ccc ;
     border-radius: 4px ;
     height : 34px ;
     line-height : 1.42857 ;
     width : 100% ;
     box-shadow:  0  1px  1px  rgba( 0 ,  0 ,  0 ,  0.075 )  inset ;
     transition: border-color  0.15 s ease-in-out  0 s, box-shadow  0.15 s ease-in-out  0 s;
     }
.form-group input[type= "file" ]{
     cursor :  pointer ;
     opacity:  0 ;
     position :  absolute ;
     top :  0 ;
     }

js

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
var  maxsize = 2*1024*1024; //2M  
var  errMsg =  "上传的图片不能超过2M！！！" ;  
var  tipMsg =  "您的浏览器暂不支持计算上传文件的大小，确保上传图片不要超过2M，建议使用IE、FireFox、Chrome浏览器。" ; 
var   browserCfg = {};  
var  ua = window.navigator.userAgent;  
if  (ua.indexOf( "MSIE" )>=1){  
     browserCfg.ie =  true ;  
} else  if (ua.indexOf( "Firefox" )>=1){  
     browserCfg.firefox =  true ;  
} else  if (ua.indexOf( "Chrome" )>=1){  
     browserCfg.chrome =  true ;  
}
$( ".fb-upload" ).on( "change" , "input[type='file']" , function (){
     var  filePath = $( this ).val();
     var  arr = filePath.split( '\\' );
     var  fileName = arr[arr.length-1];
     var  filesize = 0;  
     if (browserCfg.firefox || browserCfg.chrome ){  
         filesize = $( this )[0].files[0].size;  
     } else  if (browserCfg.ie){  
         var  obj_img =  new  Image();  
         obj_img.dynsrc = fileName;  
         filesize = obj_img.fileSize;  
     } else {
         alert(tipMsg);
         return ;  
     }
     if (filesize ==-1){  
         alert(tipMsg);
         return ;  
     } else  if (filesize > maxsize){
         
         alert(errMsg);
         return ;  
     } else {
         $( ".fb-img" ).html( "" );
         $( ".fb-img" ).html(fileName);
         $( ".fb-img" ).css({ "color" : "#555" });
         return ;  
     }
});