ホームページ ウェブフロントエンド jsチュートリアル アップロードされた画像の種類とサイズを取得する方法

アップロードされた画像の種類とサイズを取得する方法

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 からカウントされますlastIndexOf()方法从后向前检索指定字符串,如果出现了指定的字符,则返回该字符所在的位置,如果没有,返回-1,位置从0开始计数

toUpperCase()方法转换成大写字母

substring()方法截取字符串,第一个参数为开始的位置,第二个参数为结束的位置(如果省略,则默认会截取到字符串的结尾),与slice()substr()方法不同的是,substring()不接受负的参数

slice()方法同substring()方法,区别是接受负的参数(若参数为负数,则从字符串尾部开始计算位置)

substr()

toUpperCase() メソッドは大文字に変換します

substring() メソッドはインターセプトします文字列、最初のパラメータ。パラメータは開始位置、2 番目のパラメータは終了位置です (省略した場合、デフォルトで文字列の末尾がインターセプトされます)。これは slice() と同じです。 code> と <code>substr()メソッドの違いは、substring() が負のパラメータを受け入れないことです

slice()メソッドはsubstring() メソッドと同じですが、負のパラメータを受け入れる点が異なります (パラメータが負の数値の場合、位置は文字列の末尾から計算されます)

substr () メソッドは文字列をインターセプトします。最初のパラメーターは開始位置、2 番目のパラメーターはインターセプトの長さ (スライスや部分文字列とは異なります) です。使用することは推奨されなくなりました
この記事の事例を読んだ後は、PHP 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書
vueを使用してローカルjsonをリクエストする方法

React propsとstate属性の実践的なケースの説明🎜🎜🎜🎜🎜🎜🎜

以上がアップロードされた画像の種類とサイズを取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

VirtualBox でディスク サイズを増やす方法 [ガイド] VirtualBox でディスク サイズを増やす方法 [ガイド] Mar 17, 2024 am 10:10 AM

事前に定義されたディスク サイズにそれ以上のデータを入れる余地がないという状況によく遭遇します。後の段階でさらに多くの仮想マシンのハード ディスク領域が必要になった場合は、仮想ハード ディスクとパーティションを拡張する必要があります。この記事では、VirtualBox でディスク サイズを増やす方法を説明します。 VirtualBox でのディスク サイズの増加 問題が発生する可能性が常にあるため、これらの操作を実行する前に仮想ハード ディスク ファイルをバックアップする必要があることに注意することが重要です。常にバックアップを作成することをお勧めします。ただし、このプロセスは通常は正常に機能します。続行する前に必ずマシンをシャットダウンしてください。 VirtualBox でディスク サイズを増やすには 2 つの方法があります。 CLを使用したGUIを使用してVirtualBoxのディスクサイズを拡張する

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? Feb 28, 2024 pm 03:12 PM

jQueryでPUTリクエストメソッドを使用するにはどうすればよいですか? jQuery で PUT リクエストを送信する方法は、他のタイプのリクエストを送信する方法と似ていますが、いくつかの詳細とパラメータ設定に注意する必要があります。 PUT リクエストは通常​​、データベース内のデータの更新やサーバー上のファイルの更新など、リソースを更新するために使用されます。以下は、jQuery の PUT リクエスト メソッドを使用した具体的なコード例です。まず、jQuery ライブラリ ファイルが含まれていることを確認してから、$.ajax({u

ビデオ マトリックス アカウントを作成するにはどうすればよいですか?どのようなタイプのマトリックスアカウントがありますか? ビデオ マトリックス アカウントを作成するにはどうすればよいですか?どのようなタイプのマトリックスアカウントがありますか? Mar 21, 2024 pm 04:57 PM

ショートビデオプラットフォームの人気に伴い、ビデオマトリックスアカウントマーケティングが新たなマーケティング手法となっています。企業や個人は、さまざまなプラットフォームで複数のアカウントを作成および管理することで、ブランドのプロモーション、ファンの増加、製品の販売などの目標を達成できます。この記事では、ビデオ マトリックス アカウントの効果的な使用方法について説明し、さまざまな種類のビデオ マトリックス アカウントを紹介します。 1. ビデオ マトリックス アカウントを作成するにはどうすればよいですか?優れたビデオ マトリックス アカウントを作成するには、次の手順に従う必要があります。 まず、ブランド コミュニケーション、ファンの増加、製品の販売など、ビデオ マトリックス アカウントの目標を明確にする必要があります。明確な目標を持つことは、それに応じた戦略を立てるのに役立ちます。 2. プラットフォームの選択: 対象視聴者に基づいて、適切なショートビデオ プラットフォームを選択します。現在主流のショートビデオプラットフォームには、Douyin、Kuaishou、Huoshan Videoなどが含まれます。

jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する jQuery のヒント: ページ上のすべての a タグのテキストをすばやく変更する Feb 28, 2024 pm 09:06 PM

タイトル: jQuery ヒント: ページ上のすべての a タグのテキストをすばやく変更する Web 開発では、ページ上の要素を変更したり操作したりする必要がよくあります。 jQuery を使用する場合、ページ内のすべての a タグのテキスト コンテンツを一度に変更する必要がある場合があります。これにより、時間と労力を節約できます。以下では、jQuery を使用してページ上のすべての a タグのテキストをすばやく変更する方法と、具体的なコード例を紹介します。まず、jQuery ライブラリ ファイルを導入し、次のコードがページに導入されていることを確認する必要があります: &lt

Go 言語で日付が前日であるかどうかを判断するにはどうすればよいですか? Go 言語で日付が前日であるかどうかを判断するにはどうすればよいですか? Mar 24, 2024 am 10:09 AM

質問: Go 言語で日付が前日であるかどうかを判断するにはどうすればよいですか?日々の開発では、日付が前日であるかどうかを判断する必要がある状況に遭遇することがよくあります。 Go 言語では、時間計算を通じてこの関数を実装できます。以下は、特定のコード例と組み合わせて、Go 言語で日付が前日であるかどうかを判断する方法を示します。まず、Go 言語で time パッケージをインポートする必要があります。コードは次のとおりです: import(&quot;time&quot;) 次に、関数 IsYest を定義します

jQuery を使用してすべての a タグのテキスト コンテンツを変更する jQuery を使用してすべての a タグのテキスト コンテンツを変更する Feb 28, 2024 pm 05:42 PM

タイトル: jQuery を使用して、すべての a タグのテキスト コンテンツを変更します。 jQuery は、DOM 操作を処理するために広く使用されている人気のある JavaScript ライブラリです。 Web 開発では、ページ上のリンク タグ (タグ) のテキスト コンテンツを変更する必要が生じることがよくあります。この記事では、この目標を達成するために jQuery を使用する方法を説明し、具体的なコード例を示します。まず、jQuery ライブラリをページに導入する必要があります。 HTML ファイルに次のコードを追加します。

Golang関数の戻り値の型は何ですか? Golang関数の戻り値の型は何ですか? Apr 13, 2024 pm 05:42 PM

Go 関数は、異なる型の複数の値を返すことができます。戻り値の型は関数シグネチャで指定され、return ステートメントを通じて返されます。たとえば、関数は funcgetDetails()(int,string) のように整数と文字列を返すことができます。実際には、円の面積を計算する関数は、面積とオプションのエラーを返すことができます: funccircleArea(radiusfloat64)(float64,error)。注: 関数シグネチャで型が指定されていない場合は、null 値が返されます。読みやすさを向上させるために、明示的な型宣言を含む return ステートメントを使用することをお勧めします。

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? Feb 29, 2024 am 09:03 AM

jQuery 要素に特定の属性があるかどうかを確認するにはどうすればよいですか? jQuery を使用して DOM 要素を操作する場合、要素に特定の属性があるかどうかを判断する必要がある状況がよく発生します。この場合、jQuery が提供するメソッドを使用してこの関数を簡単に実装できます。以下では、jQuery 要素が特定の属性を持つかどうかを判断するために一般的に使用される 2 つの方法を紹介し、具体的なコード例を添付します。方法 1: attr() メソッドと typeof 演算子 // を使用して、要素に特定の属性があるかどうかを判断します

See all articles