Pytanie maxFileSize i acceptFileTypes wtyczki upload pliku blueimp nie działają. Czemu?


Używam wtyczki do przesyłania plików jpu Blueimp do przesyłania plików.

Nie miałem problemu z przesłaniem, ale opcja maxFileSize i acceptFileTypes nie działa.

To jest mój kod:

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


pochodzenie


Witaj, próbuję zaimplementować ten kod do przesłania pliku, ale otrzymuję komunikat o błędzie "Błąd przesyłania pliku": Wysłane bajty przekraczają rozmiar pliku Czy możesz zasugerować, co jest przyczyną? - Jay Maharjan
@JayMaharjan Czy jesteś pewien, że maxFileSize jest poprawnie skonfigurowany? - YoBre
Po wykonaniu poprawnej konfiguracji w php.ini mogę teraz przesyłać duże pliki. Dziękuję za pomoc. :) - Jay Maharjan
Dla mojego przypadku, gif był zmieniany i konwertowany do png, a następnie filtr dla gif oczywiście nie. I o dziwo, zaczęło działać, gdy tylko zorientowałem się, co się dzieje, podwoiłem liczbę sprawdzeń, czy coś zrobiłem z biblioteką, ale nic, wszystko, co włożyłem, to logi konsoli, które usunąłem i nadal pracuję. Publikowanie, więc to może pomóc komuś. - Zia Ul Rehman Mughal


Odpowiedzi:


Miał ten sam problem i Blueimp mówi: "maxFileSize i acceptFileTypes są obsługiwane tylko przez wersję interfejsu użytkownika"i dostarczył (uszkodzony) link do włączenia metod _validate i _hasError.

Więc nie wiedząc, jak włączyć te metody bez bałaganu w skrypcie, napisałem tę małą funkcję. Wydaje się, że działa dla mnie.

Po prostu dodaj to

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

na początku opcji .fileupload, jak pokazano tutaj w twoim kodzie

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

Zauważysz, że dodałem tam również funkcję filesize, ponieważ będzie działać tylko w wersji interfejsu użytkownika.

Zaktualizowano, aby uzyskać wcześniejszy problem sugerowany przez @lopsided: Dodano data.originalFiles[0]['type'].length i data.originalFiles[0]['size'].length w zapytaniach, aby upewnić się, że istnieją i nie są puste przed testowaniem pod kątem błędów. Jeśli nie istnieją, błąd nie zostanie wyświetlony i będzie polegać tylko na testowaniu błędów po stronie serwera.


127
2017-07-14 06:03



To jest naprawdę przydatne. Należy jednak zauważyć, że data.originalFiles[0]['type'] jest puste podczas przesyłania z przeglądarki, która nie obsługuje interfejsu API pliku. Tak było na moim telefonie z Androidem. To, co zrobiłem, to przekazanie go, jeśli ta wartość nie jest dostępna, a następnie powrót do sprawdzania poprawności typu mime po stronie serwera. W przeciwnym razie nigdy się nie przebijesz acceptFileTypes.test linia - lopsided
@lopsided, który jest nieparzysty, otrzymuję wartość dla data.originalFiles [0] ['type'] i ['size'] na moim telefonie z Androidem i przechodzi oba testy. Mam problem z telefonem, gdzie wszystko działa bezbłędnie, ale plik nie zostanie przesłany. Żadnych problemów nigdzie indziej, tylko Android. - PaulMrG
Myślę, że warunek "data.originalFiles [0] ['size']. Length" jest przestarzały, dlatego zawsze zwraca false. - kkocabiyik
Użyj data.files [0] ['size'] i data.files [0] ['type'] - Jose
Użycie bez 'length' (data.originalFiles [0] ['size'] && data.originalFiles [0] ['size']> 500000)? "true": "false" działa dobrze, ale chcę wiedzieć, czy brakuje mi jakiegoś scenariusza 1. data.originalFiles [0] ['size']? "true": "false" (1) zwraca wartość false dla wartości 0, null, undefined - Ganesh Arulanantham


Powinieneś dołączyć jquery.fileupload-process.js i jquery.fileupload-validate.js aby to działało.


43
2017-11-19 16:15



To wydaje się być lepszą odpowiedzią. ;) - Thasmo
Niestety nie rozwiązuje problemu. - Paul
Kolejność wczytywania skryptów jest ważna, aby uzyskać komunikat o błędzie: tmpl.min.js> jquery.ui.widget.js> jquery.iframe-transport.js> jquery.fileupload.js> jquery.fileupload-ui.js> plik jquery.fileupload-process.js> jquery.fileupload-validate.js - FAjir
Problem jest taki sam, czy możesz podać przykład pracy? - Vlatko
Mam ten sam problem. Moje pliki JS są w dokładnie opisanej kolejności, ale nadal mogę przesyłać pliki, które nie są akceptowane zgodnie z wyrażeniem regularnym, ale również znacznie przekraczają limit rozmiaru pliku. Używam najnowszej wersji FileUpload, 9.10.5 z jQuery 1.11.1 - Mr Pablo


Jak zasugerowano we wcześniejszej odpowiedzi, musimy uwzględnić dwa dodatkowe pliki - jquery.fileupload-process.js i wtedy jquery.fileupload-validate.js Jednak gdy potrzebuję wykonać kilka dodatkowych wywołań ajaxowych podczas dodawania pliku, subskrybuję fileuploadadd zdarzenie, aby wykonać te połączenia. Odnośnie takiego użycia autor tej wtyczki zasugerował następujące

Proszę spojrzeć tutaj:    https://github.com/blueimp/jQuery-File-Upload/wiki/Options#wiki-callback-options

Dodawanie dodatkowych detektorów zdarzeń za pomocą metody bind (lub metody jQuery 1.7+) jest preferowaną opcją zachowania ustawień wywołań zwrotnych przez wersję interfejsu użytkownika do przesyłania plików jQuery.

Możesz też po prostu rozpocząć przetwarzanie we własnym callbacku, na przykład:    https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload-process.js#L50

Używając kombinacji dwóch sugerowanych opcji, poniższy kod działa doskonale dla mnie

$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, próbowałem tego i otrzymałem komunikat o błędzie: Uncaught Error: cannot call methods on fileupload prior to initialization; attempted to call method 'process' - TheVillageIdiot
To prawie zawsze oznacza to .fileupload() nie został wywołany we właściwym czasie. Bez zobaczenia kodu, jego prawie niemożliwe do zdiagnozowania. Sugeruję otwarcie nowego pytania i opublikowanie odpowiedniego kodu, może jako jsfiddle. - Amith George
@TheVillageIdiot Czy próbujesz ustanowić logikę dla 'fileuploadadd' wewnątrz deklaracji $ fileInput.fileupload? Miałem podobny błąd, gdy próbowałem złożyć przykład Amitha w coś takiego: $('#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); }); ...  Było to oczywiste, kiedy o tym myślałem, ale próbowałem zdefiniować logikę wewnątrz czegoś, czego jeszcze nie zakończyłem. - jdhurst
Otrzymuję ten błąd: Uncaught ReferenceError: makeAjaxCall - rida mukhtar


Działa to dla mnie w 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



Witamy w Stack Overflow! Czy mógłbyś przepisać tę odpowiedź tak, aby była w języku angielskim? Wiem, że zautomatyzowani tłumacze czasami utrudniają mówienie, ale angielski jest jedynym (nie-programistycznym) językiem, którego używamy tutaj. - Pops
nie musisz być sprytnym językoznawcą, aby móc zrozumieć, że nasatome mówi: "To działa dla mnie: to jest poprawne w firefoxie". Błąd przesyłania to "zbyt duży rozmiar pliku". Jestem Australijczykiem i dorastałem mówiąc po angielsku, ale myślę, że jest pewne podejście do mówienia po angielsku. "Angielski jest jedynym językiem, którego używamy tutaj" nie jest prawdą. Ludzie tutaj używają wielu różnych języków. Jednak polityka tej witryny zawiera pytania i odpowiedzi w języku angielskim. - Tim Ogilvy


Jeśli masz zaimportowane wszystkie wtyczki JS w poprawnej kolejności, ale wciąż masz problemy, wydaje się, że określasz swoje własne "add" handlerowskie nerfy z wtyczki * -validate.js, które normalnie by odpalało wyłączyć całą walidację, wywołując funkcję data.process (). Aby to naprawić, po prostu zrób coś takiego w module obsługi zdarzeń "dodaj":

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



Rozwiązałem mój problem - fezfox


otwórz plik o nazwie "jquery.fileupload-ui.js", zobaczysz następujący kod:

 $.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',
        。。。。

po prostu dodaj jeden kod linii --- nowy atrybut "acceptFileTypes", na przykład:

 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

teraz zobaczysz, że wszystko jest w porządku! ~ po prostu bierzesz atrybut w niewłaściwym miejscu.


2
2017-10-10 07:31



Ta odpowiedź nie zadziała w wersji innej niż UI - PaulMrG
To zły pomysł, aby kiedykolwiek zmodyfikować kod podstawowy wtyczki / biblioteki, jeśli możesz pomóc. - BadHorsie


Sprawdzony / prawidłowy przykład dla:

  • wiele plików wejściowych
  • dla jednego lub WIELE PLIKÓW Przekazać plik - $.grep() aby usunąć pliki z tablicy z błędami
  • image i audioformat
  • dynamiczne typy plików z ciągu znaków według new RegExp()

Ogłoszenie: acceptFileTypes.test() - sprawdź typy MIME, dla plików adio jak .mp3 To będzie audio/mpeg - nie tylko rozszerzenie. Dla wszystkich opcji 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





Oto przykład obsługi zdarzeń dla Dodaj wydarzenie. Zakłada, że ​​włączona jest opcja singleFileUploads (która jest domyślna). Czytaj więcej Plik jQuery Prześlij dokumentację związaną ze zdarzeniem add / fileuploadadd. Wewnątrz pętli możesz użyć obu vars to lub plik. Przykład uzyskiwania właściwości rozmiaru: to ["rozmiar"] lub rozmiar pliku.

    /**
     * Handles Add event
     */
    base.eventAdd = function(e, data) {

        var errs = [];
        var acceptFileTypes = /(\.|\/)(gif|jpe?g|png)$/i;
        var maxFileSize = 5000000;

        // Validate file
        $.each(data.files, function(index, file) {
            if (file.type.length && !acceptFileTypes.test(file.type)) {
                errs.push('Selected file "' + file.name + '" is not alloawed. Invalid file type.');
            }
            if (this['size'] > maxFileSize) {
                errs.push('Selected file "' + file.name + '" is too big, ' + parseInt(file.size / 1024 / 1024) + 'M.. File should be smaller than ' + parseInt(maxFileSize / 1024 / 1024) + 'M.');
            }
        });

        // Output errors or submit data
        if (errs.length > 0) {
            alert('An error occured. ' + errs.join(" "));
        } else {
            data.submit();
        }
    };

1
2018-02-22 23:31





To działało dla mnie w wersji chrome, jquery.fileupload.js jest 5.42.3

     add: function(e, data) {
        var uploadErrors = [];
        var ext = data.originalFiles[0].name.split('.').pop().toLowerCase();
        if($.inArray(ext, ['odt','docx']) == -1) {
            uploadErrors.push('Not an accepted file type');
        }
        if(data.originalFiles[0].size > (2*1024*1024)) {//2 MB
            uploadErrors.push('Filesize is too big');
        }
        if(uploadErrors.length > 0) {
            alert(uploadErrors.join("\n"));
        } else {
            data.submit();
        }
    },

1
2018-04-22 13:28



Dzięki. Działa również w dniu 9.21. - geca