您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

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

可以仅检查文件扩展名,但是用户可以轻松地将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 />

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

其他 2022/1/1 18:20:14 有416人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶