怎樣取得上傳圖片類型與大小-js教程-PHP中文網

首頁

web前端

js教程

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

php中世界最好的语言

Jun 08, 2018 pm 02:28 PM

jquery 上傳圖片判斷大小類型

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

這裡使用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中文網其它相關文章！

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7488

CakePHP 教程

1377

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

如何在VirtualBox中增加磁碟大小[指南] Mar 17, 2024 am 10:10 AM

我們經常遇到預定義磁碟大小沒有空間容納更多資料的情況？如果您在稍後階段需要更多的虛擬機器硬碟空間，則必須擴充虛擬硬碟和分割區。在這篇文章中，我們將看到如何在VirtualBox中增加磁碟大小。增加VirtualBox中的磁碟大小重要的是要注意，您可能希望在執行這些操作之前備份您的虛擬硬碟文件，因為總是有可能出錯。有備份總是一個好的做法。然而，該過程通常運作良好，請確保在繼續之前關閉您的機器。有兩種方法可以增加VirtualBox中的磁碟大小。使用圖形使用者介面擴充VirtualBox的磁碟大小使用CL

視訊矩陣帳號怎麼做？它的矩陣帳號都有哪些類型呢？ Mar 21, 2024 pm 04:57 PM

隨著短影片平台的盛行，影片矩陣帳號行銷已成為一種新興行銷方式。透過在不同平台上建立和管理多個帳號，企業和個人能夠實現品牌推廣、粉絲成長和產品銷售等目標。本文將為您探討如何有效運用視訊矩陣帳號，並介紹不同類型的視訊矩陣帳號。一、視訊矩陣帳號怎麼做？要做好視訊矩陣帳號，需要遵循以下幾個步驟：首先要明確你的影片矩陣帳號的目標是什麼，是為了品牌傳播、粉絲成長還是產品銷售。明確目標有助於制定相應的策略。 2.選擇平台：根據你的目標受眾，選擇合適的短影片平台。目前主流的短視頻平台有抖音、快手、火山小影片等。

jQuery中如何使用PUT請求方式？ Feb 28, 2024 pm 03:12 PM

jQuery中如何使用PUT請求方式？在jQuery中，發送PUT請求的方法與發送其他類型的請求類似，但需要注意一些細節和參數設定。 PUT請求通常用於更新資源，例如更新資料庫中的資料或更新伺服器上的檔案。以下是在jQuery中使用PUT請求方式的具體程式碼範例。首先，確保引入了jQuery庫文件，然後可以透過以下方式發送PUT請求：$.ajax({u

jQuery小技巧：快速修改頁面所有a標籤的文本 Feb 28, 2024 pm 09:06 PM

標題：jQuery小技巧：快速修改頁面所有a標籤的文字在網頁開發中，我們經常需要對頁面中的元素進行修改和操作。使用jQuery時，有時候需要一次修改頁面中所有a標籤的文字內容，這樣可以節省時間和精力。以下將介紹如何使用jQuery快速修改頁面所有a標籤的文本，同時給出具體的程式碼範例。首先，我們需要引入jQuery庫文件，確保在頁面中引入了以下程式碼：&lt

Go語言中如何判斷日期是否為前一天？ Mar 24, 2024 am 10:09 AM

題目：Go語言中如何判斷日期是否為前一天？在日常開發中，常常會遇到需要判斷日期是否為前一天的情況。在Go語言中，我們可以透過時間運算來實現這個功能。以下將結合具體的程式碼範例來示範如何在Go語言中判斷日期是否為前一天。首先，我們需要導入Go語言中的時間包，程式碼如下：import("time")接著，我們定義一個函式IsYest

使用jQuery修改所有a標籤的文字內容 Feb 28, 2024 pm 05:42 PM

標題：使用jQuery修改所有a標籤的文字內容jQuery是一款受歡迎的JavaScript庫，被廣泛用於處理DOM操作。在網頁開發中，經常會遇到需要修改頁面上連結標籤（a標籤）的文字內容的需求。本文將介紹如何使用jQuery來實現這個目標，並提供具體的程式碼範例。首先，我們需要在頁面中引入jQuery庫。在HTML檔案中加入以下程式碼：

Golang 函數傳回值的型別是什麼？ Apr 13, 2024 pm 05:42 PM

Go函數可以傳回多個不同類型的值，傳回值類型在函數簽章中指定，並透過return語句傳回。例如，函數可以傳回一個整數和一個字串：funcgetDetails()(int,string)。在實戰中，一個計算圓面積的函數可以回傳面積和一個可選錯誤：funccircleArea(radiusfloat64)(float64,error)。注意事項：如果函數簽章未指定類型，則傳回空值；建議使用明確類型宣告的return語句以提高可讀性。

如何判斷jQuery元素是否具有特定屬性？ Feb 29, 2024 am 09:03 AM

如何判斷jQuery元素是否具有特定屬性？在使用jQuery操作DOM元素時，常會遇到需要判斷元素是否具有某個特定屬性的情況。在這種情況下，我們可以藉助jQuery提供的方法來輕鬆實現這項功能。以下將介紹兩種常用的方法來判斷一個jQuery元素是否具有特定屬性，並附上具體的程式碼範例。方法一：使用attr()方法和typeof運算子//判斷元素是否具有特定屬

See all articles

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

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題