HTML

<divclass="form-group"><labelclass="col-sm-3col-sm-6control-label">图片</label><spanclass="problem-must"></span><divclass="col-sm-8"><aclass="fb-upload"href="javascript:void(0);"><inputclass="form-control"name="pic"type="file"accept=".gif,.jpg,.png,.jpeg"/><spanclass="fb-img">上传图片</span></a></div></div>

css（仿bootstrap的input样式）

.fb-img{color:gray;display:inline-block;padding:6px12px;text-align:left;border:1pxsolid#ccc;border-radius:4px;height:34px;line-height:1.42857;width:100%;box-shadow:01px1pxrgba(0,0,0,0.075)inset;transition:border-color0.15sease-in-out0s,box-shadow0.15sease-in-out0s;}.form-groupinput[type="file"]{cursor:pointer;opacity:0;position:absolute;top:0;}

js

varmaxsize=2*1024*1024;//2MvarerrMsg="上传的图片不能超过2M！！！";vartipMsg="您的浏览器暂不支持计算上传文件的大小，确保上传图片不要超过2M，建议使用IE、FireFox、Chrome浏览器。";varbrowserCfg={};varua=window.navigator.userAgent;if(ua.indexOf("MSIE")>=1){browserCfg.ie=true;}elseif(ua.indexOf("Firefox")>=1){browserCfg.firefox=true;}elseif(ua.indexOf("Chrome")>=1){browserCfg.chrome=true;}$(".fb-upload").on("change","input[type='file']",function(){varfilePath=$(this).val();vararr=filePath.split('\\');varfileName=arr[arr.length-1];varfilesize=0;if(browserCfg.firefox||browserCfg.chrome){filesize=$(this)[0].files[0].size;}elseif(browserCfg.ie){varobj_img=newImage();obj_img.dynsrc=fileName;filesize=obj_img.fileSize;}else{alert(tipMsg);return;}if(filesize==-1){alert(tipMsg);return;}elseif(filesize>maxsize){alert(errMsg);return;}else{$(".fb-img").html("");$(".fb-img").html(fileName);$(".fb-img").css({"color":"#555"});return;}});