1. ホーム
  2. javascript

[解決済み] ファイルをアップロードする前にファイル拡張子を確認する

2022-11-28 11:46:21

質問

サーブレットに画像をアップロードしています。アップロードされたファイルが画像であるかどうかの検証は、ファイルヘッダ内のマジックナンバーをチェックすることによって、サーバー側のみで行われます。サーブレットにフォームを送信する前に、クライアント側で拡張子を検証する方法はありますか?エンターキーを押すとすぐにアップロードが開始されます。

私はクライアント側で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 />

ファイル拡張子が無効な場合、アラートを表示し、入力をリセットします。