您好,登錄后才能下訂單哦!
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進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。