Question

我想让jQuery将文件上传字段限制为仅jpg / jpeg，png和gif。我正在使用PHP进行后端检查。我已经通过JavaScript函数运行我的提交按钮，所以我真的只需要知道在提交或提醒之前如何检查文件类型。

Answer 1

您可以获得与任何其他字段相同的文件字段的值。但是，你不能改变它。

所以要表面检查文件是否具有正确的扩展名，您可以执行以下操作：

var ext = $('#my_file_field').val().split('.').pop().toLowerCase();
if($.inArray(ext, ['gif','png','jpg','jpeg']) == -1) {
    alert('invalid extension!');
}

Answer 2

此任务无需插件。从其他几个脚本拼凑出来：

$('INPUT[type="file"]').change(function () {
    var ext = this.value.match(/\.(.+)$/)[1];
    switch (ext) {
        case 'jpg':
        case 'jpeg':
        case 'png':
        case 'gif':
            $('#uploadButton').attr('disabled', false);
            break;
        default:
            alert('This is not an allowed file type.');
            this.value = '';
    }
});

这里的技巧是将上传按钮设置为禁用，除非并且直到选择了有效的文件类型。

Answer 3

你可以使用jQuery的验证插件： http://docs.jquery.com/Plugins/Validation

碰巧有一个accept（）规则可以完全满足您的需求： http://docs.jquery.com/Plugins/Validation/Methods/accept#extension

请注意，控制文件扩展名不是防弹，因为它与文件的mimetype无关。所以你可以有一个.png，它是一个word文档，而.doc是一个完全有效的png图像。所以不要忘记在服务器端进行更多的控制;）

Answer 4

对于前端，如果您使用文件字段，则放置“接受”属性非常方便。

示例：

<input id="file" type="file" name="file" size="30" 
       accept="image/jpg,image/png,image/jpeg,image/gif" 
/>

一些重要的注意事项：

The accept attribute is supported in Internet Explorer 10, Firefox, Opera, Chrome, and Safari 6.
It will show text for file extension differently in the file browser dialog from different browsers.

Answer 5

不想检查MIME而不是用户所说的任何扩展名？如果是这样，那么它不到一行：

<input type="file" id="userfile" accept="image/*|video/*" required />

Answer 6

对于我的情况，我使用了以下代码：

    if (!(/\.(gif|jpg|jpeg|tiff|png)$/i).test(fileName)) {              
    alert('You must select an image file only');               
    }

Answer 7

我尝试编写工作代码示例，我测试它，一切正常。

Hare是代码：

<强> HTML：

<input type="file" class="attachment_input" name="file" onchange="checkFileSize(this, @Model.MaxSize.ToString(),@Html.Raw(Json.Encode(Model.FileExtensionsList)))" />

<强>使用Javascript：

 //function for check attachment size and extention match
function checkFileSize(element, maxSize, extentionsArray) {
    var val = $(element).val(); //get file value

    var ext = val.substring(val.lastIndexOf('.') + 1).toLowerCase(); // get file extention 
    if ($.inArray(ext, extentionsArray) == -1) {
        alert('false extension!');
    }

    var fileSize = ($(element)[0].files[0].size / 1024 / 1024); //size in MB
    if (fileSize > maxSize) {
        alert("Large file");// if Maxsize from Model > real file size alert this
    }
}

Answer 8

此代码工作正常，但唯一的问题是如果文件格式不是指定的选项，它会显示一条警告消息，但它会显示文件名，而忽略它。

TimeDimension_Year

Answer 9

此示例仅允许上传PNG图像。

<强> HTML

<input type="file" class="form-control" id="FileUpload1" accept="image/png" />

<强> JS

$('#FileUpload1').change(
                function () {
                    var fileExtension = ['png'];
                    if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                        alert("Only '.png' format is allowed.");
                        this.value = ''; // Clean field
                        return false;
                    }
                });

Answer 10

<form enctype="multipart/form-data">
   <input name="file" type="file" />
   <input type="submit" value="Upload" />
</form>
<script>
$('input[type=file]').change(function(){
    var file = this.files[0];
    name = file.name;
    size = file.size;
    type = file.type;
    //your validation
});
</script>

Answer 11

如果您正在处理多个（html 5）文件上传，我会采用最佳建议评论并对其进行一些修改：

    var files = $('#file1')[0].files;
    var len = $('#file1').get(0).files.length;

    for (var i = 0; i < len; i++) {

        f = files[i];

        var ext = f.name.split('.').pop().toLowerCase();
        if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
            alert('invalid extension!');

        }
    }

Answer 12

    $("input[name='btnsubmit']").attr('disabled', true);
    $('input[name="filphoto"]').change(function () {
    var ext = this.value.match(/\.(.+)$/)[1];
    switch (ext) 
    {
    case 'jpg':
    case 'jpeg':
    case 'png':
    case 'bmp':
        $("input[name='btnsubmit']").attr('disabled', false);
    break;
    default:
        alert('This is not an allowed file type.');
        $("input[name='btnsubmit']").attr('disabled', true);
        this.value = '';

Answer 13

function validateFileExtensions(){
        var validFileExtensions = ["jpg", "jpeg", "gif", "png"];
        var fileErrors = new Array();

        $( "input:file").each(function(){
            var file = $(this).value;
            var ext = file.split('.').pop();
            if( $.inArray( ext, validFileExtensions ) == -1) {
                fileErrors.push(file);
            }
        });

        if( fileErrors.length > 0 ){
            var errorContainer = $("#validation-errors");
            for(var i=0; i < fileErrors.length; i++){
                errorContainer.append('<label for="title" class="error">* File:'+ file +' do not have a valid format!</label>');
            }
            return false;
        }
        return true;
    }

Answer 14

这是一个简单的javascript验证代码，验证后会清理输入文件。

<input type="file" id="image" accept="image/*" onChange="validate(this.value)"/>

function validate(file) {
    var ext = file.split(".");
    ext = ext[ext.length-1].toLowerCase();      
    var arrayExtensions = ["jpg" , "jpeg", "png", "bmp", "gif"];

    if (arrayExtensions.lastIndexOf(ext) == -1) {
        alert("Wrong extension type.");
        $("#image").val("");
    }
}

如何让jQuery在上传时限制文件类型？

14 个答案: