Câu hỏi maxFileSize và acceptFileTypes trong tệp tải lên tệp blueimp không hoạt động. Tại sao?


Tôi đang sử dụng plugin tải lên tệp Blueimp jQuery cho tệp tải lên.

Tôi không gặp vấn đề gì khi tải lên nhưng tùy chọn maxFileSize và acceptFileTypes đừng làm việc.

Đây là mã của tôi:

$(document).ready(function () {
    'use strict';

    $('#fileupload').fileupload({
        dataType: 'json',
        autoUpload: false,
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        maxFileSize: 5000000,
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p style="color: green;">' + file.name + '<i class="elusive-ok" style="padding-left:10px;"/> - Type: ' + file.type + ' - Size: ' + file.size + ' byte</p>')
                    .appendTo('#div_files');
            });
        },
        fail: function (e, data) {
            $.each(data.messages, function (index, error) {
                $('<p style="color: red;">Upload file error: ' + error + '<i class="elusive-remove" style="padding-left:10px;"/></p>')
                    .appendTo('#div_files');
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);

            $('#progress .bar').css('width', progress + '%');
        }
    });
});

76
2017-07-03 15:08


gốc


Xin chào, tôi đang cố gắng triển khai mã này để tải lên tệp nhưng nhận được lỗi cho biết Lỗi tải lên tệp: Số byte đã tải lên vượt quá kích thước tệp Bạn có thể đề xuất nguyên nhân không? - Jay Maharjan
@JayMaharjan Bạn có chắc chắn rằng maxFileSize được cấu hình đúng không? - YoBre
Sau khi thực hiện cấu hình thích hợp trong php.ini bây giờ tôi có thể tải lên các tệp lớn. Cảm ơn sự giúp đỡ của bạn. :) - Jay Maharjan
Đối với trường hợp của tôi, gif đã được thay đổi kích thước và chuyển đổi sang png, và sau đó lọc cho gif thất bại rõ ràng. Và kỳ lạ, nó bắt đầu hoạt động ngay sau khi tôi tìm hiểu chuyện gì đang xảy ra, tôi đã kiểm tra gấp đôi nếu tôi đã làm gì đó với thư viện nhưng không có gì, tất cả những gì tôi đặt là nhật ký console, mà tôi đã xóa và vẫn đang hoạt động. Đăng bài để điều này có thể giúp ai đó. - Zia Ul Rehman Mughal


Các câu trả lời:


Có cùng một vấn đề, và anh chàng blueimp nói "maxFileSize và acceptFileTypes chỉ được phiên bản giao diện người dùng hỗ trợ"và đã cung cấp một liên kết (bị hỏng) để kết hợp các phương thức _validate và _hasError.

Vì vậy, mà không biết làm thế nào để kết hợp các phương pháp mà không rối tung lên kịch bản tôi đã viết chức năng này ít. Nó dường như làm việc cho tôi.

Chỉ cần thêm cái này

add: function(e, data) {
        var uploadErrors = [];
        var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
        if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
            uploadErrors.push('Not an accepted file type');
        }
        if(data.originalFiles[0]['size'].length && data.originalFiles[0]['size'] > 5000000) {
            uploadErrors.push('Filesize is too big');
        }
        if(uploadErrors.length > 0) {
            alert(uploadErrors.join("\n"));
        } else {
            data.submit();
        }
},

ở đầu tùy chọn .fileupload như được hiển thị trong mã của bạn ở đây

$(document).ready(function () {
    'use strict';

    $('#fileupload').fileupload({
        add: function(e, data) {
                var uploadErrors = [];
                var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
                if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
                    uploadErrors.push('Not an accepted file type');
                }
                if(data.originalFiles[0]['size'].length && data.originalFiles[0]['size'] > 5000000) {
                    uploadErrors.push('Filesize is too big');
                }
                if(uploadErrors.length > 0) {
                    alert(uploadErrors.join("\n"));
                } else {
                    data.submit();
                }
        },
        dataType: 'json',
        autoUpload: false,
        // acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        // maxFileSize: 5000000,
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p style="color: green;">' + file.name + '<i class="elusive-ok" style="padding-left:10px;"/> - Type: ' + file.type + ' - Size: ' + file.size + ' byte</p>')
                .appendTo('#div_files');
            });
        },
        fail: function (e, data) {
            $.each(data.messages, function (index, error) {
                $('<p style="color: red;">Upload file error: ' + error + '<i class="elusive-remove" style="padding-left:10px;"/></p>')
                .appendTo('#div_files');
            });
        },
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);

            $('#progress .bar').css('width', progress + '%');
        }
    });
});

Bạn sẽ nhận thấy rằng tôi đã thêm một chức năng tập tin trong đó cũng bởi vì điều đó cũng sẽ chỉ hoạt động trong phiên bản giao diện người dùng.

Đã cập nhật để nhận sự cố trong quá khứ được đề xuất bởi @lopsided: Đã thêm data.originalFiles[0]['type'].length và data.originalFiles[0]['size'].length trong các truy vấn để đảm bảo chúng tồn tại và không trống trước khi kiểm tra lỗi. Nếu chúng không tồn tại, sẽ không có lỗi nào được hiển thị và nó sẽ chỉ dựa vào kiểm tra lỗi phía máy chủ của bạn.


127
2017-07-14 06:03



Điều này thực sự hữu ích. Tuy nhiên cần lưu ý rằng data.originalFiles[0]['type'] trống khi tải lên từ trình duyệt không hỗ trợ API tệp. Đây là trường hợp trên điện thoại Android của tôi. Những gì tôi đã làm là để vượt qua nó nếu giá trị này không có sẵn và sau đó dự phòng để xác nhận loại mime phía máy chủ. Nếu không bạn sẽ không bao giờ vượt qua acceptFileTypes.test hàng - lopsided
@ lopsided đó là lẻ, tôi nhận được giá trị cho data.originalFiles [0] ['type'] và ['size'] trên điện thoại Android của tôi và nó vượt qua cả hai bài kiểm tra. Tôi thực sự gặp sự cố với điện thoại của mình nơi mọi thứ dường như hoạt động mà không có lỗi nhưng tệp không được tải lên. Không có vấn đề gì khác, chỉ là Android. - PaulMrG
Tôi nghĩ rằng điều kiện 'data.originalFiles [0] [' size ']. Length' không được chấp nhận do đó nó luôn trả về false. - kkocabiyik
Sử dụng data.files [0] ['size'] và data.files [0] ['type'] - Jose
Sử dụng không có 'length' (data.originalFiles [0] ['size'] && data.originalFiles [0] ['size']> 500000)? 'true': 'false' hoạt động tốt, nhưng tôi muốn biết liệu tôi có thiếu bất kỳ kịch bản nào 1. data.originalFiles [0] ['size']? 'true': 'false' (1) trả về false cho các giá trị 0, null, undefined - Ganesh Arulanantham


Bạn nên bao gồm jquery.fileupload-process.js và jquery.fileupload-validate.js Để làm cho nó hoạt động.


43
2017-11-19 16:15



Điều này có vẻ là câu trả lời tốt hơn. ;) - Thasmo
Thật không may nó không giải quyết được vấn đề. - Paul
Thứ tự bạn tải tập lệnh là rất quan trọng để có được thông báo lỗi xuất hiện: tmpl.min.js> jquery.ui.widget.js> jquery.iframe-transport.js> jquery.fileupload.js> jquery.fileupload-ui.js> jquery.fileupload-process.js> jquery.fileupload-validate.js - FAjir
Vấn đề là như nhau, bạn có thể cung cấp một số ví dụ làm việc xin vui lòng? - Vlatko
Tôi gặp vấn đề tương tự. Các tệp JS của tôi theo thứ tự chính xác được mô tả, nhưng tôi vẫn có thể tải lên các tệp không được chấp nhận theo regex, mà còn ồ ạt trên giới hạn kích thước tệp. Tôi đang sử dụng phiên bản FileUpload mới nhất, 9.10.5 với jQuery 1.11.1 - Mr Pablo


Như được đề xuất trong câu trả lời trước, chúng tôi cần bao gồm hai tệp bổ sung - jquery.fileupload-process.js và sau đó jquery.fileupload-validate.js Tuy nhiên khi tôi cần thực hiện một số cuộc gọi ajax bổ sung trong khi thêm tệp, tôi đang đăng ký fileuploadadd sự kiện để thực hiện các cuộc gọi đó. Về việc sử dụng như vậy, tác giả của plugin này đề xuất như sau

Xin hãy xem ở đây:    https://github.com/blueimp/jQuery-File-Upload/wiki/Options#wiki-callback-options

Thêm các trình lắng nghe sự kiện bổ sung thông qua phương thức bind (hoặc trên phương thức với jQuery 1.7+) là tùy chọn ưa thích để bảo toàn các cài đặt gọi lại bằng phiên bản Giao diện người dùng tải lên tệp jQuery.

Ngoài ra, bạn cũng có thể chỉ cần bắt đầu quá trình xử lý trong cuộc gọi lại của riêng bạn, như sau:    https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload-process.js#L50

Sử dụng kết hợp hai tùy chọn được đề xuất, mã sau hoạt động hoàn hảo cho tôi

$fileInput.fileupload({
    url: 'upload_url',
    type: 'POST',
    dataType: 'json',
    autoUpload: false,
    disableValidation: false,
    maxFileSize: 1024 * 1024,
    messages: {
        maxFileSize: 'File exceeds maximum allowed size of 1MB',
    }
});

$fileInput.on('fileuploadadd', function(evt, data) {
    var $this = $(this);
    var validation = data.process(function () {
        return $this.fileupload('process', data);
    });

    validation.done(function() {
        makeAjaxCall('some_other_url', { fileName: data.files[0].name, fileSizeInBytes: data.files[0].size })
            .done(function(resp) {
                data.formData = data.formData || {};
                data.formData.someData = resp.SomeData;
                data.submit();
        });
    });
    validation.fail(function(data) {
        console.log('Upload error: ' + data.files[0].error);
    });
});

10
2018-05-03 15:24



Amith, tôi đã thử điều này và có lỗi sau: Uncaught Error: cannot call methods on fileupload prior to initialization; attempted to call method 'process' - TheVillageIdiot
Nó gần như luôn luôn có nghĩa là .fileupload() không được gọi vào đúng thời điểm. Không nhìn thấy mã, hầu như không thể chẩn đoán được nó. Tôi đề nghị mở một câu hỏi mới và đăng các mã có liên quan, có thể là một jsfiddle. - Amith George
@ TheVillageIdiot Bạn đang cố gắng thiết lập logic cho 'fileuploadadd' bên trong khai báo $ fileInput.fileupload chưa? Tôi đã có một lỗi tương tự khi tôi cố gắng để gấp ví dụ của Amith bên trong một cái gì đó như thế này: $('#fileupload').fileupload({ blah : blah, blah : blah, }) $fileInput.on('fileuploadadd', function(evt, data) { var $this = $(this); var validation = data.process(function () { return $this.fileupload('process', data); }); ...  Rõ ràng là khi tôi nghĩ về nó, nhưng tôi đã cố gắng xác định logic bên trong thứ mà tôi chưa hoàn thành tuyên bố. - jdhurst
tôi nhận được lỗi này: Uncaught ReferenceError: makeAjaxCall - rida mukhtar


Điều này làm việc cho tôi trong firefox

$('#fileupload').fileupload({

    dataType: 'json',
    //acceptFileTypes: /(\.|\/)(xml|pdf)$/i,
    //maxFileSize: 15000000,

    add: function (e, data) {
        var uploadErrors = [];

        var acceptFileTypes = /\/(pdf|xml)$/i;
        if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
            uploadErrors.push('File type not accepted');
        }

        console.log(data.originalFiles[0]['size']) ;
        if (data.originalFiles[0]['size'] > 5000000) {
            uploadErrors.push('Filesize too big');
        }
        if(uploadErrors.length > 0) {
            alert(uploadErrors.join("\n"));
        } else {
            data.context = $('<p/>').text('Uploading...').appendTo(document.body);
            data.submit();
        }

    },
    done: function (e, data) {
        data.context.text('Success!.');
    }
});

6
2017-12-30 05:48



Chào mừng bạn đến với Stack Overflow! Bạn có thể viết lại câu trả lời này sao cho nó bằng tiếng Anh? Tôi biết những người dịch tự động đôi khi có thể khó nói, nhưng tiếng Anh là ngôn ngữ duy nhất (không lập trình) mà chúng tôi sử dụng ở đây. - Pops
tâm trí bạn, bạn không phải là một nhà ngôn ngữ học xảo quyệt để có thể tìm ra rằng nasatome đang nói "Điều này làm việc cho tôi: nó đúng trong firefox." Lỗi tải lên là "kích thước tệp quá lớn". Tôi là người Úc và tôi lớn lên nói tiếng Anh, nhưng tôi nghĩ có một thái độ nói tiếng Anh nhất định. "Tiếng Anh là ngôn ngữ duy nhất chúng tôi sử dụng ở đây" là không đúng sự thật. Mọi người ở đây sử dụng nhiều ngôn ngữ khác nhau. Tuy nhiên, chính sách của trang web này có các câu hỏi và câu trả lời bằng tiếng Anh. - Tim Ogilvy


Nếu bạn đã có tất cả các plugin của JS được nhập và theo đúng thứ tự, nhưng bạn vẫn gặp sự cố, có vẻ như chỉ định trình xử lý "thêm" của riêng bạn nerfs một từ plugin * -validate.js, thường sẽ kích hoạt tắt tất cả các xác nhận bằng cách gọi data.process (). Vì vậy, để sửa chữa nó chỉ làm một cái gì đó như thế này trong xử lý sự kiện "thêm" của bạn:

$('#whatever').fileupload({
...
add: function(e, data) {
   var $this = $(this);
   data.process(function() {
      return $this.fileupload('process', data);
   }).done(function(){
      //do success stuff
      data.submit(); <-- fire off the upload to the server
   }).fail(function() {
      alert(data.files[0].error);
   });
}
...
});

3
2018-02-16 20:12



Giải quyết vấn đề của tôi - fezfox


mở tệp có tên "jquery.fileupload-ui.js", bạn sẽ thấy mã như sau:

 $.widget('blueimp.fileupload', $.blueimp.fileupload, {

    options: {
        // By default, files added to the widget are uploaded as soon
        // as the user clicks on the start buttons. To enable automatic
        // uploads, set the following option to true:
        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
        autoUpload: false,
        // The ID of the upload template:
        uploadTemplateId: 'template-upload',
        // The ID of the download template:
        downloadTemplateId: 'template-download',
        。。。。

chỉ cần thêm một dòng mã --- thuộc tính mới "acceptFileTypes", như sau:

 options: {
        // By default, files added to the widget are uploaded as soon
        // as the user clicks on the start buttons. To enable automatic
        // uploads, set the following option to true:
        **acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,**
        autoUpload: false,
        // The ID of the upload template:
        uploadTemplateId: 'template-upload',
        // The ID of the download template:
        downloadTemplateId: 'template-d

bây giờ bạn sẽ thấy tất cả mọi thứ là hoàn toàn! ~ bạn chỉ cần lấy thuộc tính với một địa điểm sai.


2
2017-10-10 07:31



Câu trả lời này sẽ không hoạt động trên phiên bản không phải giao diện người dùng - PaulMrG
Bạn nên sửa đổi mã lõi của plugin / thư viện nếu bạn có thể trợ giúp. - BadHorsie


Ví dụ được kiểm tra / hợp lệ cho:

  • nhiều đầu vào tệp
  • cho một hoặc MULTIPLE FILES tải lên - $.grep() để xóa tệp khỏi mảng có lỗi
  • image và audiođịnh dạng
  • các loại tệp động từ chuỗi new RegExp()

Để ý: acceptFileTypes.test() - kiểm tra các loại mime, cho tệp adio như .mp3 nó sẽ là audio/mpeg - không chỉ extenstion. Đối với tất cả các tùy chọn blueimp: https://github.com/blueimp/jQuery-File-Upload/wiki/Options

$('input[type="file"]').each(function(i){

    // .form_files is my div/section of form for input file and progressbar
    var $progressbar = $(this).parents('.form_files:first').find('.progress-bar:first');

    var $image_format = 'jpg|jpeg|jpe|png|gif';
    var $audio_format = 'mp3|mpeg';
    var $all_formats = $image_format + '|' + $audio_format;

    var $image_size = 2;
    var $audio_size = 10;
    var mb = 1048576;

    $(this).fileupload({
        // ...
        singleFileUploads: false,   // << send all together, not single
        // ...
        add: function (e, data) {

            // array with all indexes of files with errors
            var error_uploads_indexes = [];

            // when add file - each file
            $.each(data.files, function(index, file) {

                // array for all errors
                var uploadErrors = [];


                // validate all formats first
                if($all_formats){

                    // check all formats first - before size
                    var acceptFileTypes = "(\.|\/)(" + $all_formats + ")$";
                    acceptFileTypes = new RegExp(acceptFileTypes, "i");

                    // when wrong format
                    if(data.files[index]['type'].length && !acceptFileTypes.test(data.files[index]['type'])) {
                        uploadErrors.push('Not an accepted file type');

                    }else{

                        // default size is image_size
                        var $my_size = $image_size;

                            // check audio format
                            var acceptFileTypes = "(\.|\/)(" + $audio_format + ")$";
                            acceptFileTypes = new RegExp(acceptFileTypes, "i");

                            // alert(data.files[index]['type']);
                            // alert(acceptFileTypes.test('audio/mpeg'));

                            // if is audio then size is audio_size
                            if(data.files[index]['type'].length && acceptFileTypes.test(data.files[index]['type'])) {
                                $my_size = $audio_size;
                            }

                        // check size
                        if(data.files[index]['size'] > $my_size * mb) {
                            uploadErrors.push('Filesize is too big');
                        };
                    };

                }; // << all_formats

                // when errors
                if(uploadErrors.length > 0) {
                    //  alert(uploadErrors.join("\n"));

                    // mark index of error file
                    error_uploads_indexes.push(index);
                    // alert error
                    alert(uploadErrors.join("\n"));

                };

            }); // << each


            // remove indexes (files) with error
            data.files = $.grep( data.files, function( n, i ) {
                return $.inArray(i, error_uploads_indexes) ==-1;
            });


            // if are files to upload
            if(data.files.length){
                // upload by ajax
                var jqXHR = data.submit().done(function (result, textStatus, jqXHR) {
                        //...
                     alert('done!') ;
                        // ...
                });
            } // 

        }, // << add
        progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $progressbar.css(
                'width',
                progress + '%'
                );
        }
    }); // << file_upload

    //          
}); // << each input file

1
2018-03-24 22:13