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.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
}
.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;
}
}); |
本文转自 爱笑嘚蛋蛋 51CTO博客，原文链接：http://blog.51cto.com/dd118/1871722，如需转载请自行联系原作者