首頁 > web前端 > js教程 > 主體

怎樣取得上傳圖片類型與大小

php中世界最好的语言
發布: 2018-06-08 14:28:45
原創
2400 人瀏覽過

這次帶給大家怎麼取得上傳圖片類型與大小,取得上傳圖片類型與大小的注意事項有哪些,以下就是實戰案例,一起來看一下。

這裡使用jQuery判斷上傳圖片的類型和大小:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="" method="">
  <input type="file" id="file" />
</form>
<p id="p_1">图片格式为:</p>
<p id="p_2">图片大小为:</p>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
$(function(){
  var p_1 = $(&#39;#p_1&#39;),
    p_2 = $(&#39;#p_2&#39;);
  $(&#39;body&#39;).on(&#39;change&#39;,&#39;#file&#39;,function(){
    var path = $(this).val(),
    extStart = path.lastIndexOf(&#39;.&#39;),
    ext = path.substring(extStart,path.length).toUpperCase();
    //判断图片格式
    if(ext !== &#39;.PNG&#39; && ext !== &#39;.JPG&#39; && ext !== &#39;.JPEG&#39; && ext !== &#39;.GIF&#39;){
      alert(&#39;请上传正确格式的图片&#39;);
      resetFile();
      return false;
    }else{
      p_1.html(&#39;图片格式为:&#39; + ext);
    }
    //获取图片大小,注意使用this,而不是$(this)
    var size = this.files[0].size / 1024;
    if(size > 10240){
      alert(&#39;图片大小不能超过10M&#39;);
      resetFile();
      return false;
    }else{
      p_2.html(&#39;图片大小为:&#39; + size.toFixed(2) + &#39;KB&#39;);
    }
  })
  //还原
  function resetFile(){
    //清空file表单的值,不能直接使用$(&#39;#file&#39;).val(&#39;&#39;)这种写法
    $(&#39;form&#39;).html(&#39;<input type="file" id="file" />&#39;);
    p_1.html(&#39;图片格式为:&#39;);
    p_2.html(&#39;图片大小为:&#39;);
  }
})
</script>
</body>
</html>
登入後複製

lastIndexOf()方法從後向前檢索指定字串,如果出現了指定的字符,則傳回該字元的位置,如果沒有,回傳-1,位置從0開始計數

toUpperCase()方法轉換成大寫字母

substring ()方法截取字串,第一個參數為開始的位置,第二個參數為結束的位置(如果省略,則預設會截取到字串的結尾),與slice()substr()方法不同的是,substring()不接受負的參數

slice()方法同substring()方法,差異是接受負的參數(若參數為負數,則從字串尾部開始計算位置)

substr()方法截取字串,第一個參數是開始的位置,第二個參數是截取的長度(不同於slice和substring),現已不建議使用

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀

如何使用vue請求本地json

#react props與state屬性實戰案例詳解

##

以上是怎樣取得上傳圖片類型與大小的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!