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

  • Z时代
  • 2024-01-10
  • 分类：问答

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

我在客户端使用Javascript和jQuery。

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

回答：

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

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

以上是 上传文件前验证文件扩展名 的全部内容， 来源链接： utcz.com/qa/401143.html

回到顶部