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

Question

我正在将图像上传到servlet.通过检查文件头中的幻数,验证上载的文件是否是图像仅在服务器端完成.在将表单提交给servlet之前,有没有办法在客户端验证扩展？我一打开它就开始上传.

我在客户端使用Javascript和jQuery.

更新: 我最终得到了服务器端验证,它读取字节并拒绝上传(如果它不是图像).

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

这将显示警报并在文件扩展名无效的情况下重置输入.

Answer 2

为了简化请求,现有的答案似乎都不够紧凑.检查给定文件输入字段是否具有来自集合的扩展可以如下完成:

function hasExtension(inputID, exts) {
    var fileName = document.getElementById(inputID).value;
    return (new RegExp('(' + exts.join('|').replace(/\./g, '\\.') + ')$')).test(fileName);
}

因此,例如使用可能(这里upload是id一个文件输入的):

if (!hasExtension('upload', ['.jpg', '.gif', '.png']) {
    // ... block upload
}

或者作为jQuery插件:

$.fn.hasExtension = function(exts) {
    return (new RegExp('(' + exts.join('|').replace(/\./g, '\\.') + ')$')).test($(this).val());
}

用法示例:

if (!$('#upload').hasExtension(['.jpg', '.png', '.gif'])) {
    // ... block upload
}

将.replace(/\./g, '\\.')有逃脱的正则表达式,这样基本的扩展可以没有匹配任何字符的点来传递点.

这些都没有错误检查以保持简短,大概如果你使用它们,你将确保输入首先存在,扩展数组是有效的!

Answer 3

$(function () {
    $('input[type=file]').change(function () {
        var val = $(this).val().toLowerCase(),
            regex = new RegExp("(.*?)\.(docx|doc|pdf|xml|bmp|ppt|xls)$");

        if (!(regex.test(val))) {
            $(this).val('');
            alert('Please select correct file format');
        }
    });
});

Answer 4

我来到这里是因为我确信这里的答案都不是......诗意的:

function checkextension() {
  var file = document.querySelector("#fUpload");
  if ( /\.(jpe?g|png|gif)$/i.test(file.files[0].name) === false ) { alert("not an image!"); }
}

<input type="file" id="fUpload" onchange="checkextension()"/>

Answer 5

检查是否选择了文件

       if (document.myform.elements["filefield"].value == "")
          {
             alert("You forgot to attach file!");
             document.myform.elements["filefield"].focus();
             return false;  
         }

检查文件扩展名

  var res_field = document.myform.elements["filefield"].value;   
  var extension = res_field.substr(res_field.lastIndexOf('.') + 1).toLowerCase();
  var allowedExtensions = ['doc', 'docx', 'txt', 'pdf', 'rtf'];
  if (res_field.length > 0)
     {
          if (allowedExtensions.indexOf(extension) === -1) 
             {
               alert('Invalid file Format. Only ' + allowedExtensions.join(', ') + ' are allowed.');
               return false;
             }
    }

Answer 6

您是否使用 input type="file" 来选择上传文件？如果是这样，为什么不使用 accept 属性？

<input type="file" name="myImage" accept="image/x-png,image/gif,image/jpeg" />

Answer 7

我喜欢这个例子:

<asp:FileUpload ID="fpImages" runat="server" title="maximum file size 1 MB or less" onChange="return validateFileExtension(this)" />

<script language="javascript" type="text/javascript">
    function ValidateFileUpload(Source, args) {
        var fuData = document.getElementById('<%= fpImages.ClientID %>');
        var FileUploadPath = fuData.value;

        if (FileUploadPath == '') {
            // There is no file selected 
            args.IsValid = false;
        }
        else {
            var Extension = FileUploadPath.substring(FileUploadPath.lastIndexOf('.') + 1).toLowerCase();
            if (Extension == "gif" || Extension == "png" || Extension == "bmp" || Extension == "jpeg") {
                args.IsValid = true; // Valid file type
                FileUploadPath == '';
            }
            else {
                args.IsValid = false; // Not valid file type
            }
        }
    }
</script>

Answer 8

尝试使用 mimetype 比检查扩展名更好。因为，有时文件可以在没有它的情况下存在，并且这些文件在 Linux 或 UNIX 系统中运行得很好。

所以，你可以尝试这样的事情：

["image/jpeg", "image/png", "image/gif"].indexOf(file.type) > -1

或者

["image/jpeg", "image/png", "image/gif"].includes(file.type)

Answer 9

如果您需要在输入字段中测试远程URL,可以尝试使用您感兴趣的类型测试一个简单的正则表达式.

$input_field = $('.js-input-field-class');

if ( !(/\.(gif|jpg|jpeg|tiff|png)$/i).test( $input_field.val() )) {
  $('.error-message').text('This URL is not a valid image type. Please use a url with the known image types gif, jpg, jpeg, tiff or png.');
  return false;
}

这将捕获以.gif,.jpg,.jpeg,.tiff或.png 结尾的任何内容

我应该注意到一些像Twitter这样的热门网站会在图片末尾附加一个尺寸属性.例如,即使它是有效的图像类型,以下将无法通过此测试:

https://pbs.twimg.com/media/BrTuXT5CUAAtkZM.jpg:large

因此,这不是一个完美的解决方案.但它会让你大约90%的方式.