[解決済み] ファイルをアップロードする前にファイル拡張子を確認する
質問
サーブレットに画像をアップロードしています。アップロードされたファイルが画像であるかどうかの検証は、ファイルヘッダ内のマジックナンバーをチェックすることによって、サーバー側のみで行われます。サーブレットにフォームを送信する前に、クライアント側で拡張子を検証する方法はありますか?エンターキーを押すとすぐにアップロードが開始されます。
私はクライアント側でJavascriptとjQueryを使用しています。
更新しています。 私は最終的にそれが画像でない場合は、アップロードを拒否するバイト&ampを読み込み、サーバー側の検証を終了しました。
どのように解決するのですか?
拡張子だけをチェックすることも可能ですが、virus.exe を virus.jpg にリネームすれば、簡単に検証を通過することができます。
参考までに、ファイルの拡張子をチェックし、有効な拡張子の 1 つを満たさない場合に中止するコードは次のとおりです。(無効なファイルを選択し、警告の動作を確認するために送信を試みます)
var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];
function Validate(oForm) {
var arrInputs = oForm.getElementsByTagName("input");
for (var i = 0; i < arrInputs.length; i++) {
var oInput = arrInputs[i];
if (oInput.type == "file") {
var sFileName = oInput.value;
if (sFileName.length > 0) {
var blnValid = false;
for (var j = 0; j < _validFileExtensions.length; j++) {
var sCurExtension = _validFileExtensions[j];
if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
blnValid = true;
break;
}
}
if (!blnValid) {
alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
return false;
}
}
}
}
return true;
}
<form onsubmit="return Validate(this);">
File: <input type="file" name="my file" /><br />
<input type="submit" value="Submit" />
</form>
このコードでは、ユーザがファイルを選択せずに送信できるようになっています。
if (sFileName.length > 0) {
とそれに付随する閉じ括弧を削除してください。このコードでは、名前に関係なく、フォームに入力されたすべてのファイルを検証します。
これはjQueryを使えばもっと少ない行数でできますが、私はquot;raw" JavaScriptで十分満足していますし、最終的な結果は同じです。
もっと多くのファイルがある場合や、フォームの送信時だけでなく、ファイルを変更したときにもチェックを行いたい場合は、このようなコードを代わりに使用してください。
var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];
function ValidateSingleInput(oInput) {
if (oInput.type == "file") {
var sFileName = oInput.value;
if (sFileName.length > 0) {
var blnValid = false;
for (var j = 0; j < _validFileExtensions.length; j++) {
var sCurExtension = _validFileExtensions[j];
if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
blnValid = true;
break;
}
}
if (!blnValid) {
alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
oInput.value = "";
return false;
}
}
}
return true;
}
File 1: <input type="file" name="file1" onchange="ValidateSingleInput(this);" /><br />
File 2: <input type="file" name="file2" onchange="ValidateSingleInput(this);" /><br />
File 3: <input type="file" name="file3" onchange="ValidateSingleInput(this);" /><br />
ファイル拡張子が無効な場合、アラートを表示し、入力をリセットします。
関連
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] アップロード前に画像をプレビューする
-
[解決済み] RESTful WebServiceにファイルや関連データをJSONで投稿する。
-
[解決済み] jQuery Ajax ファイルアップロード
-
[解決済み】関数の前のエクスクラメーションマークは何をするのですか?
-
[解決済み】アップロード前にjavascriptでファイルのMIMEタイプをチェックするには?
-
[解決済み] 配列からオブジェクトを生成する
-
[解決済み] Node.jsでbase64エンコードされた画像をAmazon S3へアップロードする
-
[解決済み] moment.jsでミュータビリティを回避するには?
-
[解決済み] AngularJS - ngRepeatフィルタリングされた結果の参照を取得する方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ジェスト あるクラスの特定のメソッドをモックする方法
-
[解決済み] <Enter>でjQuery UIダイアログを送信する
-
[解決済み] ExtJS 4のイベントハンドリングについて
-
[解決済み] reactのrender関数でdynamic hrefを作成するには?
-
[解決済み] TypeScriptのdeclare classとinterfaceの違いとは?
-
[解決済み] AngularJS - ngRepeatフィルタリングされた結果の参照を取得する方法
-
[解決済み] JSHintの'+'前の改行不良の説明
-
[解決済み] Chromeのwebkitインスペクタで「Unsafe JavaScript attempt to access frame with URL...」というエラーが継続的に発生する。
-
[解決済み] JavaScriptで長い配列を小さい配列に分割する方法
-
[解決済み] JavaScript で css プロパティを使用して HTML 要素の背景色を設定する方法