您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
HTML
<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样式)
.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
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;
}
});免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。