maxFileSize i acceptFileTypes we wtyczce do przesyłania plików blueimp nie działają. Czemu?


85

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

Nie miałem problemu z wgrywaniem ale opcja maxFileSizei acceptFileTypesnie 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 + '%');
        }
    });
});

Witam, próbuję zaimplementować ten kod do przesyłania plików, ale pojawia się błąd o treści: Błąd przesyłania pliku: przesłane bajty przekraczają rozmiar pliku. Czy możesz zasugerować przyczynę?
Jay Maharjan

2
@JayMaharjan Czy jesteś pewien, że maxFileSize jest poprawnie skonfigurowany?
YoBre

1
Po wykonaniu odpowiedniej konfiguracji w php.ini mogę teraz przesyłać duże pliki. Dziękuję za pomoc. :)
Jay Maharjan,

W moim przypadku rozmiar gif był zmieniany i konwertowany na png, a następnie filtrowanie dla gif oczywiście nie powiodło się. I o dziwo, zaczęło działać samo, gdy tylko zorientowałem się, co się dzieje, dwukrotnie sprawdziłem, czy zrobiłem coś z biblioteką, ale nic, wszystko, co umieściłem, to dzienniki konsoli, które usunąłem i nadal działają. Publikowanie w ten sposób może komuś pomóc.
Zia Ul Rehman Mughal

Odpowiedzi:


135

Miał ten sam problem, a facet od blueimp mówi: „ maxFileSize i acceptFileTypes są obsługiwane tylko przez wersję interfejsu użytkownika ” i dostarczył (zepsuty) link do włączenia metod _validate i _hasError.

Więc nie wiedząc, jak włączyć te metody, nie psując skryptu, napisałem tę małą funkcję. Wydaje mi się, że to działa.

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 w kodzie tutaj

$(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ę rozmiaru pliku, ponieważ będzie ona działać tylko w wersji interfejsu użytkownika.

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


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 File API. Tak było w przypadku mojego telefonu z Androidem. To, co zrobiłem, to przekazanie go, jeśli ta wartość nie jest dostępna, a następnie powrót do walidacji typu MIME po stronie serwera. W przeciwnym razie nigdy nie przekroczysz acceptFileTypes.testlinii
krzywo

@lopsided, to dziwne, otrzymuję wartość data.originalFiles [0] ['type'] i ['size'] na moim telefonie z Androidem i pomyślnie przeszła oba testy. W rzeczywistości mam problem z telefonem, w którym wszystko wydaje się działać bez błędów, ale plik nie jest przesyłany. Żadnych problemów nigdzie indziej, tylko Android.
PaulMrG,

8
Myślę, że warunek „data.originalFiles [0] [„ rozmiar ”]. Długość” jest przestarzały, dlatego zawsze zwraca wartość fałsz.
kkocabiyik,

5
Użyj data.files [0] ['size'] i data.files [0] ['type']
Jose

2
Używasz bez parametru „length” (data.originalFiles [0] [„size”] && data.originalFiles [0] [„size”]> 500000)? „true”: „false” działa dobrze, ale chcę wiedzieć, czy brakuje mi scenariusza 1. data.originalFiles [0] ['size']? 'true': 'false' (1) zwraca false dla wartości 0, null, undefined
Ganesh Arulanantham

49

4
To wydaje się być lepszą odpowiedzią. ;)
thasmo

8
Kolejność ładowania skryptów jest ważna, aby pojawił się komunikat o błędzie: 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
a11r

3
Problem jest ten sam, czy możesz podać działający przykład?
Vlatko,

3
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

3
U mnie też nie działa, nawet jeśli wszystkie skrypty są zawarte we właściwej kolejności.
BadHorsie

10

Jak zasugerowano we wcześniejszej odpowiedzi, musimy dołączyć dwa dodatkowe pliki - jquery.fileupload-process.jsa następnie. jquery.fileupload-validate.jsJednak ponieważ podczas dodawania pliku muszę wykonać kilka dodatkowych wywołań ajax, subskrybuję fileuploadaddzdarzenie, aby wykonać te wywołania. Odnośnie takiego użycia autor tej wtyczki zasugerował co następuje

Zajrzyj tutaj: https://github.com/blueimp/jQuery-File-Upload/wiki/Options#wiki-callback-options

Dodanie dodatkowych detektorów zdarzeń za pomocą metody bind (lub metody z jQuery 1.7+) jest preferowaną opcją, aby zachować ustawienia wywołania zwrotnego przez wersję interfejsu użytkownika przesyłania plików jQuery.

Alternatywnie możesz również po prostu rozpocząć przetwarzanie we własnym wywołaniu zwrotnym, na przykład: https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload-process.js#L50

Korzystając z kombinacji dwóch sugerowanych opcji, poniższy kod działa idealnie 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);
    });
});

1
Amith, próbowałem tego i otrzymałem następujący błąd:Uncaught Error: cannot call methods on fileupload prior to initialization; attempted to call method 'process'
TheVillageIdiot,

1
Prawie zawsze oznacza to, że .fileupload()nie został wezwany we właściwym czasie. Bez zobaczenia kodu prawie niemożliwe jest zdiagnozowanie. Proponuję otworzyć nowe pytanie i zamieścić odpowiedni kod, może jako jsfiddle.
Amith George

@TheVillageIdiot Czy próbujesz ustalić logikę dla „fileuploadadd” wewnątrz deklaracji $ fileInput.fileupload? Miałem podobny błąd, kiedy próbowałem umieścić przykład Amith w czymś takim: $('#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ę w czymś, czego jeszcze nie skończyłem deklarować.
jdhurst

Otrzymuję ten błąd: Uncaught ReferenceError: makeAjaxCall
rida mukhtar

8

To działa dla mnie w przeglądarce 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!.');
    }
});

3
Witamy w Stack Overflow! Czy mógłbyś przepisać tę odpowiedź tak, aby była w języku angielskim? Wiem, że tłumacze zautomatyzowani mogą czasami utrudniać rozpoznanie, ale angielski jest jedynym (nieprogramującym) językiem, którego tutaj używamy.
Wyskakuje

15
pamiętaj, nie musisz być przebiegłym lingwistą, aby zrozumieć, że nasatome mówi „To działa dla mnie: działa poprawnie w przeglądarce Firefox”. Błąd przesyłania to „za duży rozmiar pliku”. Jestem Australijczykiem i dorastałem mówiąc po angielsku, ale myślę, że istnieje pewne podejście do mówienia po angielsku. „Angielski jest jedynym językiem, którego tu używamy” nie jest prawdą. Ludzie tutaj używają wielu różnych języków. Jednak polityka tej witryny polega na zadawaniu pytań i odpowiedzi w języku angielskim.
Tim Ogilvy,

3

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

wystarczy dodać jeden kod liniowy --- 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 z niewłaściwym miejscem.


To zły pomysł, aby kiedykolwiek modyfikować podstawowy kod wtyczki / biblioteki, jeśli możesz w tym pomóc.
BadHorsie

3

Jeśli zaimportowałeś wszystkie pliki JS wtyczki i są one w odpowiedniej kolejności, ale nadal masz problemy, wydaje się, że określenie własnego modułu obsługi „dodaj” osłabia ten z wtyczki * -validate.js, która normalnie by się uruchomiła wyłączyć wszystkie sprawdzanie poprawności, wywołując data.process (). Aby to naprawić, po prostu zrób coś takiego w module obsługi zdarzeń „add”:

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

Rozwiązałem mój problem
fezfox

2

Sprawdzony / ważny przykład dla:

  • wiele plików wejściowych
  • dla jednego lub wielu plików upload - $.grep()aby usunąć pliki z tablicy z błędami
  • image i audio format
  • dynamiczne typy plików z ciągów według new RegExp()

Uwaga: acceptFileTypes.test()- sprawdź typy MIME, dla pliku adio tak .mp3, jak będzie audio/mpeg- nie tylko rozszerzenia. 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

Tylko przykład obsługi zdarzenia dla zdarzenia Add. Zakłada, że ​​opcja singleFileUploads jest włączona (co jest wartością domyślną). Przeczytaj więcej dokumentacji jQuery File Upload, jak powiązać ze zdarzeniem add / fileuploadadd. Wewnątrz pętli możesz użyć obu zmiennych tego lub pliku . Przykład pobierania właściwości size: this ['size'] lub file.size .

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

To działało dla mnie w chrome, wersja jquery.fileupload.js to 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
Dzięki. Działa również na 9.21.
geca

1
.fileupload({
    add: function (e, data) { 
        var attachmentValue = 3 * 1000 * 1024;
        var totalNoOfFiles = data.originalFiles.length;
        for (i = 0; i < data.originalFiles.length; i++) {
            if (data.originalFiles[i]['size'] > attachmentValue) {
                $attachmentsList.find('.uploading').remove();
                $attachmentMessage.append("<li>" + 'Uploaded bytes exceeded the file size' + "</li>");
                $attachmentMessage.show().fadeOut(10000, function () {
                    $attachmentMessage.html('');
                });
                data.originalFiles.splice(i, 1);
            }
        }
        if (data.files[0]) {
            $attachmentsList
           .prepend('<li class="uploading" class="clearfix loading-content">' + data.files[0].name + '</li>');
        }
        data.submit();                    
    }

1

W przypadku, gdy ktoś szuka powszechnie obsługiwanych formatów przez serwer

3g2|3gp|3gp2|3gpp|aac|aaf|aca|accdb|accde|accdt|acx|adt|adts|afm|ai|aif|aifc|aiff|appcache|application|art|asd|asf|asi|asm|asr|asx|atom|au|avi|axs|bas|bcpio|bin|bmp|c|cab|calx|cat|cdf|chm|class|clp|cmx|cnf|cod|cpio|cpp|crd|crl|crt|csh|css|csv|cur|dcr|deploy|der|dib|dir|disco|dll|dllconfig|dlm|doc|docm|docx|dot|dotm|dotx|dsp|dtd|dvi|dvr-ms|dwf|dwp|dxr|eml|emz|eot|eps|esd|etx|evy|exe|execonfig|fdf|fif|fla|flr|flv|gif|gtar|gz|h|hdf|hdml|hhc|hhk|hhp|hlp|hqx|hta|htc|htm|html|htt|hxt|ico|ics|ief|iii|inf|ins|isp|IVF|jar|java|jck|jcz|jfif|jpb|jpe|jpeg|jpg|js|json|jsonld|jsx|latex|less|lit|lpk|lsf|lsx|lzh|m13|m14|m1v|m2ts|m3u|m4a|m4v|man|manifest|map|mdb|mdp|me|mht|mhtml|mid|midi|mix|mmf|mno|mny|mov|movie|mp2|mp3|mp4|mp4v|mpa|mpe|mpeg|mpg|mpp|mpv2|ms|msi|mso|mvb|mvc|nc|nsc|nws|ocx|oda|odc|ods|oga|ogg|ogv|one|onea|onepkg|onetmp|onetoc|onetoc2|osdx|otf|p10|p12|p7b|p7c|p7m|p7r|p7s|pbm|pcx|pcz|pdf|pfb|pfm|pfx|pgm|pko|pma|pmc|pml|pmr|pmw|png|pnm|pnz|pot|potm|potx|ppam|ppm|pps|ppsm|ppsx|ppt|pptm|pptx|prf|prm|prx|ps|psd|psm|psp|pub|qt|qtl|qxd|ra|ram|rar|ras|rf|rgb|rm|rmi|roff|rpm|rtf|rtx|scd|sct|sea|setpay|setreg|sgml|sh|shar|sit|sldm|sldx|smd|smi|smx|smz|snd|snp|spc|spl|spx|src|ssm|sst|stl|sv4cpio|sv4crc|svg|svgz|swf|t|tar|tcl|tex|texi|texinfo|tgz|thmx|thn|tif|tiff|toc|tr|trm|ts|tsv|ttf|tts|txt|u32|uls|ustar|vbs|vcf|vcs|vdx|vml|vsd|vss|vst|vsto|vsw|vsx|vtx|wav|wax|wbmp|wcm|wdb|webm|wks|wm|wma|wmd|wmf|wml|wmlc|wmls|wmlsc|wmp|wmv|wmx|wmz|woff|woff2|wps|wri|wrl|wrz|wsdl|wtv|wvx|x|xaf|xaml|xap|xbap|xbm|xdr|xht|xhtml|xla|xlam|xlc|xlm|xls|xlsb|xlsm|xlsx|xlt|xltm|xltx|xlw|xml|xof|xpm|xps|xsd|xsf|xsl|xslt|xsn|xtp|xwd|z|zip

0

Możesz także użyć dodatkowej funkcji, takiej jak:

    function checkFileType(filename, typeRegEx) {
        if (filename.length < 4 || typeRegEx.length < 1) return false;
        var filenameParts = filename.split('.');
        if (filenameParts.length < 2) return false;
        var fileExtension = filenameParts[filenameParts.length - 1];
        return typeRegEx.test('.' + fileExtension);
    }

0

Powinieneś dołączyć jquery.fileupload-process.js i jquery.fileupload-validate.js .

Następnie...

$(this).fileupload({
    // ...
    processfail: function (e, data) {
        data.files.forEach(function(file){
            if (file.error) {
                self.$errorMessage.html(file.error);
                return false;
            }
        });
    },
//...
}

wywołanie zwrotne processfail jest uruchamiane po niepowodzeniu walidacji.


0
  • Możesz także użyć rozszerzenia pliku, aby sprawdzić typ pliku.
  • Prostszym sposobem byłoby zrobienie czegoś, co podano poniżej w środku dodaj:

    add : function (e,data){
       var extension = data.originalFiles[0].name.substr( 
       (data.originalFiles[0].name.lastIndexOf('.') +1) );
                switch(extension){
                    case 'csv':
                    case 'xls':
                    case 'xlsx':
                        data.url = <Your URL>; 
                        data.submit();
                    break;
                    default:
                        alert("File type not accepted");
                    break;
                }
      }
    

0

jeśli masz wiele plików, używasz pętli do weryfikacji każdego formatu pliku, coś takiego

add: function(e, data) {
        data.url = 'xx/';
        var uploadErrors = [];
         var acceptFileTypes = /^image\/(gif|jpe?g|png)$/i;
        console.log(data.originalFiles);
        for (var i = 0; i < data.originalFiles.length; i++) {
            if(data.originalFiles[i]['type'].length && !acceptFileTypes.test(data.originalFiles[i]['type'])) {
                    uploadErrors.push('Not an accepted file type');
                    data.originalFiles
                }
                if(data.originalFiles[i]['size'].length && data.originalFiles[i]['size'] > 5000000) {
                    uploadErrors.push('Filesize is too big');
                }
                if(uploadErrors.length > 0) {

                      alert(uploadErrors.join("\n"));
                }
        }
        data.submit();
      },
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.