データ検証は、アップロードされるデータが開発者によって課された特定の要件に適合することを確認するのに役立つため、Web アプリケーションの重要な部分です。データはサーバー側とクライアント側の両方で検証できますが、クライアント側の検証は多くの場合、ユーザーの時間を節約し、より優れたスムーズなユーザー エクスペリエンスを証明します。クライアント側のデータ検証は簡単に実行でき、時間も大幅に短縮されます。
このハウツー ガイドでは、HTML、JavaScript/jQuery を使用してフォームを作成し、アップロードされるファイルのサイズを検証するプロセスについて説明します。この検証の利点は、ユーザーが特定のサイズのファイルのみをアップロードするように制限し、ユーザーが要件に厳密に従っていることを確認できることです。ファイルのサイズが不適切な場合、ファイルをサーバーにアップロードせずにユーザーにメッセージを表示できるため、貴重な時間を節約できます。
ウェブページの作成
まず、単純な HTML Web ページを作成します。
DOCTYPE html >
< html >
< 頭 >
< 題名 >
の検証 ファイル サイズ その間 JavaScript を使用したアップロード / jQuery
題名 >
頭 >
< 体 スタイル = 'padding-top: 10px; text-align:center;' >
< p > アップロード ファイル p >
< 入力 ID = 'ファイル' タイプ = 'ファイル' スタイル = '左パディング: 95px;' />
< br >< br >
< ボタン オンクリック = 「サイズ検証()」 > アップロード ボタン >
体 >
html >
コードを理解する:
ウェブページの本文では、単純に 、 <入力> 、
そして <ボタン> 鬼ごっこ。の <入力> タグが使用されているため、ユーザーはファイルを選択してから、 <ボタン> 鬼ごっこ。
の <ボタン> タグは サイズ検証() クリックイベントで関数を呼び出し、ファイルのサイズを決定し、ファイルのサイズに応じて適切なアラートを出力します。
JavaScript sizeValidation() 関数の定義
を定義する JavaScript コードを書きましょう。 サイズ検証() 関数。
< 脚本 >
関数 サイズ検証 ( ) {
var 入力 = document.getElementById ( 'ファイル' ) ;
だった ファイル = 入力ファイル。
もしも ( ファイルの長さ== 0 ) {
アラート ( 'ファイルが選択されていません' ) ;
戻る 間違い ;
}
var fileSize = Math.round ( ( ファイル [ 0 ] 。サイズ / 1024 ) ) ;
もしも ( ファイルサイズ < = 5 * 1024 ) {
アラート ( 「アップロードしました」 ) ;
} そうしないと {
アラート (
「エラー！ファイルが大きすぎます」 ) ;
}
}
脚本 >
コードを理解する:
の本体内部 サイズ検証() 関数では、最初に タグを取得してから、 var ファイル = inputElement.files; 行を変更して、アップロード中のファイルにアクセスできるようにします。次に、ファイルがアップロードされているかどうかを確認します。アップロードされていない場合は、エラー メッセージを表示し、false を返すことで関数から抜け出します。
次に、いくつかの計算を使用してファイルのサイズを決定します。ファイルが適切なサイズ、つまり 5MB (この場合) であれば、アップロードされます。
それ以外の場合は、エラー メッセージを含むポップアップが表示されます。
結論
クライアント側の検証ははるかに効率的ですが、それでもサーバー側の検証に代わるものではなく、ほとんどの場合回避できます。アプリケーションの効率と正確さの両方を確保できるように、サーバー側とクライアント側の両方の検証を実装することが常にベスト プラクティスです。