上传文件前验证文件扩展名 [英] Validation of file extension before uploading file

问题描述

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

I am uploading images to a servlet. The validation whether the uploaded file is an image is done in server side only, by checking the magic numbers in the file header. Is there any way to validate the extensions in client side before submitting the form to servlet? As soon as I hit enter it starts uploading.

我在客户端使用 Javascript 和 jQuery.

I am using Javascript and jQuery in client side.

更新:我最终得到了读取字节和的服务器端验证.如果它不是图像，则拒绝上传.

Update: I was finally ended up with server side validation which reads bytes & rejects the upload if it is not an image.

推荐答案

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

It's possible to check only the file extension, but user can easily rename virus.exe to virus.jpg and "pass" the validation.

值得一提的是，这里是检查文件扩展名并在不符合有效扩展名之一时中止的代码:(选择无效文件并尝试提交以查看警报)

For what it's worth, here is the code to check file extension and abort if does not meet one of the valid extensions: (choose invalid file and try to submit to see the alert in action)

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) { 及其关联的右括号.该代码将验证表单中输入的任何文件，无论其名称如何.

Note, the code will allow user to send without choosing file... if it's required, remove the line if (sFileName.length > 0) { and it's associate closing bracket. The code will validate any file input in the form, regardless of its name.

这可以用 jQuery 以更少的代码完成，但我对原始"JavaScript 足够满意，最终结果是一样的.

This can be done with jQuery in less lines, but I'm comfortable enough with "raw" JavaScript and the final result is the same.

如果您有更多文件，或者想在更改文件时触发检查，而不仅仅是在表单提交中，请改用此类代码:

In case you have more files, or want to trigger the check upon changing the file and not only in form submission, use such code instead:

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

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

This will show alert and reset the input in case of invalid file extension.

这篇关于上传文件前验证文件扩展名的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！