限制上傳檔案的大小

標籤：限制上傳檔案大小

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;  }});

限制上傳檔案的大小