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 サーバー (リモート デスクトップ) をインストールする方法

推薦する

MySQLの高性能最適化スキルの概要

データベースコマンド仕様すべてのデータベース オブジェクト名には小文字を使用し、アンダースコアで区切...

HTMLの基礎: HTMLの基本構造

HTML ハイパーテキスト ドキュメントの基本構造は、ドキュメント ヘッダーとドキュメント本体の 2...

JS で配列をループする 4 つの方法のまとめ

この記事では、配列を走査する 4 つの方法を比較してまとめます。 for ループ: for (let...

MySQL テーブルスペースの断片化の概念と関連する問題の解決策

目次背景表領域の断片化とは何ですか?表領域の断片化を確認する方法表スペースの断片化問題を解決する方法...

Reactはグローバル箇条書きボックスメソッドをカプセル化します

この記事の例では、Reactカプセル化グローバルポップアップボックスの具体的なコードを参考までに共有...

Linux ディスク クォータ管理のグラフィカルな例

ディスク クォータは、コンピューター内の指定されたディスクのストレージ制限です。つまり、管理者はユー...

html2canvasで画像が正常にキャプチャできない時の解決方法

質問まず、私が遭遇した問題についてお話しします。まず、そういった需要があるわけです。フロントエンドは...

HTML シンボルからエンティティへのアルゴリズムのチャレンジ

チャレンジ:文字列内の文字 &、<、>、" (二重引用符)、および &...

node.jsのインストールとHbuilderXの設定の詳細な説明

npm インストールチュートリアル: 1. Node.jsインストールパッケージをダウンロードする公...

Javascript のスコープとクロージャの詳細

目次1. 範囲2. スコープチェーン3. 語彙の範囲5. 閉鎖の適用6. クロージャの欠陥7. 閉会...

Win10でIIS10を構成し、ASPプログラムのデバッグをサポートする手順

マイクロソフトIIS (Internet Information Server) は、Microso...

MySQLクエリキャッシュの簡単な使い方の詳細な説明

目次1. クエリキャッシュの実装プロセス2. クエリキャッシュを構成する3. クエリキャッシュを有効...

マスタークラスタに再参加する k8s ノードの実装

1. ノードを削除するkubectl delete node node01を実行します。 2. この...

Ubuntu 18.04 に Nvidia グラフィック カード ドライバーをインストールするチュートリアル (画像とテキスト付き)

0. 事前準備BIOS でセキュア ブートを無効にします。無効にしないと、サードパーティ ソースを...

Vueコンポーネントの作成方法と使用方法を説明する記事

目次1. コンポーネントとは何ですか? 2. グローバルコンポーネントを作成する方法1 1. Vue...