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

问题描述

我正在上传图片到一个servlet。上传的文件是否为图片的验证仅在服务器端完成，方法是检查文件头中的幻数。在将表单提交给servlet之前，有什么方法可以验证客户端的扩展吗？一旦我进入它开始上传。

我在客户端使用Javascript和jQuery。
$ b

更新：
我终于用服务器端验证结束了，读取字节&如果不是图像，则拒绝上传。

解决方案

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

值得一提的是，如果不符合其中一个有效的扩展名，则检查文件扩展名和中止码：（选择无效文件并尝试提交以查看警报）

var _validFileExtensions = [.jpg，.jpeg，.bmp，。 gif，.png];函数验证（oForm）{var arrInputs = oForm.getElementsByTagName（input）; for（var i = 0; i< arrInputs.length; i ++）{var oInput = arrInputs [i];如果（oInput.type ==文件）{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;打破; }} if（！blnValid）{alert（Sorry，+ sFileName +is invalid，allowed extensions are：+ _validFileExtensions.join（，））;返回false; }}}}} return true;} < form onsubmit =return Validate（this）;>档案：< input type =filename =my file/>< br /> < input type =submitvalue =Submit/>< / form>

请注意，代码将允许用户发送而不选择文件...如果需要，删除行 if（sFileName.length> 0）{，它是相关的右括号。代码将验证表单中的任何文件输入，不管名称如何。

这可以通过jQuery以较少的行来完成，但是我对raw JavaScript和最终的结果是一样的。

如果你有更多的文件，或者想要在更改文件时触发检查，而不仅仅是在表单提交中，使用这样的代码，而不是：
$ b

var _validFileExtensions = [.jpg，.jpeg，.bmp，.gif， .PNG];函数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;打破; }} if（！blnValid）{alert（Sorry，+ sFileName +is invalid，allowed extensions are：+ _validFileExtensions.join（，））; oInput.value =;返回false; }}} return true;}

File 1：< input type =filename =file1onchange =ValidateSingleInput（this）; />< br />文件2：< input type =filename =file2onchange =ValidateSingleInput（this）; />< br />文件3：< input type =filename =file3onchange =ValidateSingleInput（this）; />< br />

并在无效文件扩展名的情况下重置输入。

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.

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.

解决方案

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>

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.

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屋！