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
;  
    
}
});