Làm cách nào để jQuery hạn chế các loại tệp khi tải lên?

Tôi muốn có giới hạn jQuery một trường tải lên tệp chỉ jpg / jpeg, png và gif. Tôi đang làm kiểm tra phụ trợ với PHP. Tôi đang chạy nút gửi của mình thông qua một JavaScriptchức năng vì vậy tôi thực sự chỉ cần biết cách kiểm tra các loại tệp trước khi gửi hoặc cảnh báo.

Bạn có thể nhận giá trị của một trường tệp giống như bất kỳ trường nào khác. Bạn không thể thay đổi nó, tuy nhiên.

Vì vậy, để kiểm tra một cách hời hợt nếu một tệp có phần mở rộng phù hợp, bạn có thể làm một cái gì đó như thế này:

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

Không có plugin cần thiết cho nhiệm vụ này. Kết hợp điều này với nhau từ một vài kịch bản khác:

$('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 = '';
    }
});

Mẹo ở đây là đặt nút tải lên thành vô hiệu hóa trừ khi và cho đến khi loại tệp hợp lệ được chọn.

Bạn có thể sử dụng plugin xác thực cho jQuery: http://docs.jquery.com/Plugins/Validation

Nó xảy ra có một quy tắc chấp nhận () thực hiện chính xác những gì bạn cần: http://docs.jquery.com/Plugins/Validation/Methods/accept#extension

Lưu ý rằng việc kiểm soát phần mở rộng tệp không phải là bằng chứng đạn vì nó không liên quan đến mô phỏng của tệp. Vì vậy, bạn có thể có một .png đó là một tài liệu từ và một .doc đó là một hình ảnh png hoàn toàn hợp lệ. Vì vậy, đừng quên tạo thêm điều khiển phía máy chủ;)

Đối với giao diện người dùng, việc đặt thuộc tính ' accept ' là khá thuận tiện nếu bạn đang sử dụng trường tệp.

Thí dụ:

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

Một vài lưu ý quan trọng:

• Thuộc tính chấp nhận được hỗ trợ trong Internet Explorer 10, Firefox, Opera, Chrome và Safari 6.
• Nó sẽ hiển thị văn bản cho phần mở rộng tệp khác nhau trong hộp thoại trình duyệt tệp từ các trình duyệt khác nhau.

Bạn không muốn kiểm tra MIME hơn là bất cứ điều gì mà người dùng đang nói dối? Nếu vậy thì nó ít hơn một dòng:

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

đối với trường hợp của tôi, tôi đã sử dụng các mã sau đây:

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

Tôi cố gắng viết ví dụ mã làm việc, tôi kiểm tra nó và mọi thứ hoạt động.

Thỏ là mã:

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

Mã này hoạt động tốt, nhưng vấn đề duy nhất là nếu định dạng tệp không phải là tùy chọn đã chỉ định, nó sẽ hiển thị một thông báo cảnh báo nhưng nó sẽ hiển thị tên tệp trong khi nó nên bỏ qua nó.

$('#ff2').change(
                function () {
                    var fileExtension = ['jpeg', 'jpg', 'pdf'];
                    if ($.inArray($(this).val().split('.').pop().toLowerCase(), fileExtension) == -1) {
                        alert("Only '.jpeg','.jpg','.pdf' formats are allowed.");
                        return false; }
});

Ví dụ này chỉ cho phép tải lên hình ảnh PNG.

HTML

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

Mã não

$('#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;
                    }
                });

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

Nếu bạn đang xử lý nhiều tệp tải lên (html 5), tôi đã nhận xét được đề xuất hàng đầu và sửa đổi một chút:

    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!');

        }
    }

    $("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 = '';

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;
    }

Đây là một mã đơn giản để xác thực javascript và sau khi xác thực nó sẽ xóa tệp đầu vào.

<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("");
    }
}