上传文件前验证文件扩展名

Question

我正在将图像上传到servlet。通过检查文件头中的幻数，仅在服务器端验证上传的文件是否为图像。在将表单提交给Servlet之前，有什么方法可以在客户端验证扩展？我一按回车就开始上传。

我在客户端使用Javascript和jQuery。

更新： 我最终通过服务器端验证结束了工作，该验证读取字节，如果不是图像，则拒绝上传。

Answer 1

可以仅检查文件扩展名，但是用户可以轻松地将virus.exe重命名为virus.jpg并“通过”验证。

值得一试的是，以下代码检查文件扩展名，如果不符合有效扩展名之一，则中止该代码：（选择无效文件，然后尝试提交以查看运行中的警报）

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可以用更少的行数完成，但是我对“原始” 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 />

如果文件扩展名无效，它将显示警报并重置输入。