HTML
图片
上传图片
css(仿bootstrap的input样式).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;
}
jsvar 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;
}
});