小编典典

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

javascript

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

我在客户端使用Javascript和jQuery。

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


阅读 387

收藏
2020-04-25

共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 />

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

2020-04-25