JavaScriptアップロードファイル制限パラメータケースの詳細な説明

JavaScriptアップロードファイル制限パラメータケースの詳細な説明

プロジェクトシナリオ:

1. アップロードファイルの制限

関数:

1. フロントエンド操作による異常なファイルのアップロードを防ぐ
2. 要件を満たすルールを制限し、表示モデルを最適化する

機能性:

1. ファイルインスタンスを取得する
2. 検証ルールメソッドを実行する

コードは次のとおりです。

//サイズ制限 checkFileSize(file, rules) {
    新しい Promise を返します ((resolve, reject) => {
        ファイルサイズ / 1024 / 1024 > ルール ? 拒否() : 解決()
    })。それから(
        () => {
          真を返す
        },
        () => {
			//操作プロンプト return Promise.reject()
        }
    )
},
//アップロード形式の制限 checkFileType(file, rules) {
    新しい Promise を返します ((resolve, reject) => {
        ルール && rules.includes(file.type) ? 解決() : 拒否()
    })。それから(
      () => {
          真を返す
      },
      () => {
          //操作プロンプト return Promise.reject()
      }
    )
},
//アスペクト比(画像)
checkImageWH(ファイル、ルール) {
    const _this = これ
    新しい Promise を返します ((resolve, reject) => {
    	//ファイルを読み取る const filereader = new FileReader()
        filereader.readAsDataURL(ファイル)
        ファイルリーダー.onload = e => {
          定数src = e.target.result
          定数イメージ = 新しいイメージ()
          イメージ.onload = 関数() {
			//データを分析し、ルールに準拠しているかどうかを判断します。resolve()
		}
          image.onerror = 拒否
          画像.src = src
        }
    })。それから(
        () => {
          真を返す
        },
        () => {
          //操作プロンプト return Promise.reject()
        }
    )
},
//アスペクト比(ビデオ)
checkVideoWH(ファイル、ルール) {
      新しいPromise(function(resolve,reject)を返す{
        var url = URL.createObjectURL(ファイル)
        var ビデオ = document.createElement('ビデオ')
        ビデオ.onloadedmetadata = evt => {
          URL.revokeObjectURL(url)
          //データを分析し、ルールに準拠しているかどうかを判断します。resolve()
        }
        video.src = URL
        video.load() // メタデータを取得します
      })。それから(
        () => {
          真を返す
        },
        () => {
          //操作プロンプト return Promise.reject()
        }
      )
}

実際の通話

//ファイルインスタンスを取得する Screen(){
	// 権限ルールを取得します const { filesSize, filesFormat, fileLimit} = this // ファイルサイズ、ファイルタイプ、画像/ビデオの幅と高さの制限 // パラメータの判定 const isFileSize = filesSize ? await this.checkFileSize(file, filesSize) : true
    const isFileType = filesFormat ? this.checkFileType(file, filesFormat) を待ちます: true
	//画像マテリアルif (fileLimit && fileLimit.type * 1 === 1) {
      const isImageLimit = fileLimit? this.checkImageWH(file, fileLimit) を待ちます: true
      //出力結果 return isFileSize && isFileType && isImageLimit
    } そうでない場合 (fileLimit&& fileLimit.type * 1 === 2) {
    //ビデオ素材 const isVideoLimit = fileLimit? await this.checkVideoWH(file, fileLimit) : true
      //出力結果 return isFileSize && isFileType && isVideoLimit
    } それ以外 {
    //制限なし //出力結果 return isFileSize && isFileType
    }
}

まとめ:

1. インスタンスを取得する
2. 実行方法。

JavaScript アップロードファイル制限パラメータの詳細なケースに関するこの記事はこれで終わりです。より関連性の高い js アップロードファイル制限パラメータの内容については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript における一般的な配列操作
  • JavaScript の async と await のシンプルで詳細な学習
  • 古典的なスネークゲームの JavaScript 実装
  • 組み込みオブジェクトに関するJavascriptの基礎
  • JavaScriptの動作メカニズムの詳細な説明とイベントループについての簡単な説明
  • Python コルーチンと JavaScript コルーチンの比較
  • マウスの尾行効果を実現する JavaScript
  • シンプルなドラッグ効果を実現するJavaScript
  • JavaScript配列重複排除の詳細な説明
  • 航空機戦争ゲームを実装するためのJavaScript
  • JavaScript setinterval 1秒遅延ソリューション
  • JavaScript 変数の昇格についての簡単な説明
  • JavaScriptイベント実行メカニズムの深い理解
  • プロジェクトに必須の 8 つの JavaScript コード スニペット

<<:  MySQLサーバーは--read-onlyオプションで実行されているため、このステートメントを実行できません

>>:  Ubuntu 20.04 に Xrdp サーバー (リモート デスクトップ) をインストールする方法

推薦する

Dockerイメージの読み込み原理

目次Docker イメージ鏡とは何ですか? Dockerイメージの読み込み原理コミットミラーDock...

インスピレーションを得るための7つのクールなダイナミックウェブサイトデザイン

デザインの分野では、毎年さまざまなデザインのトレンドや流行があります。たとえば、近年のレスポンシブデ...

WindowsシステムでMySQLデータベースを完全にアンインストールして、MySQLを再インストールします

1. コントロールパネルで、MySQLのすべてのコンポーネントをアンインストールします。コントロール...

Gokudōゲームにおけるフロントエンド知識のまとめ

背景日本語を学び始めた当初は、日本語の50音を覚えるのは簡単ではなく、特にカタカナを覚えるのは困難で...

Tomcat パイプライン モードのパイプラインとバルブの詳細な説明

序文比較的複雑な大規模システムでは、複雑なロジックで処理する必要があるオブジェクトまたはデータ フロ...

MySQL の全体的なアーキテクチャの紹介

MySQL の全体的なアーキテクチャは、サーバー層とストレージ エンジン層に分かれています。サーバー...

あなたを救うために、私のテーブルは何を使えばいいでしょうか (Haiyu Blog)

テーブルはかつて、Web ページの開発、つまりレイアウトにおいて非常に重要な役割を果たしていました。...

DockerとFastDFSのインストールコマンドと使い方の詳しい説明

Dockerの機能1) すぐに始められるユーザーがプログラムを「Docker 化」するには、わずか数...

Django は Pillow を使用して検証コード機能を簡単に設定します (Python)

1. モジュールをインポートし、検証状態を定義する PIL から Image、ImageDraw、...

macOS での MySQL 8.0.16 のインストールと設定のグラフィック チュートリアル

この記事では、macOSでのMySQL 8.0.16のインストールと設定のチュートリアルを参考までに...

MySQL 変数宣言とストアド プロシージャの分析

変数の宣言グローバル変数の設定@a='新しい変数' を設定します。関数やストアドプロ...

FirefoxでCookieとお気に入りをインポートおよびエクスポートする方法

Firefox は、多くの拡張機能とプラグインを備えた、よく使用されるブラウザです。IE に比べて多...

MySQL のストレージ エンジンの違いと比較

MyISAM ストレージエンジンMyISAM は ISAM ストレージ エンジンに基づいており、それ...

Ubuntu Linuxシステムをインストールするときにハードディスクをパーティション分割する最も合理的な方法の詳細な説明

Windows または Linux オペレーティング システムをインストールするかどうかに関係なく、...

Linux テキスト検索コマンド find の詳細な使用方法

find コマンドは主にディレクトリやファイルを検索するために使用され、一致のために複数のパラメータ...