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进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。