maxFileSize und acceptFileTypes im Upload-Plugin für Blueimp-Dateien funktionieren nicht. Warum?

85

Ich verwende das Blueimp jQuery-Plugin zum Hochladen von Dateien zum Hochladen von Dateien.

Ich hatte kein Problem beim Hochladen aber die Option maxFileSizeund acceptFileTypesfunktioniert nicht.

Das ist mein Code:

$(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 + '%');
        }
    });
});
YoBre
quelle
Hallo, ich versuche, diesen Code für das Hochladen von Dateien zu implementieren, erhalte jedoch den Fehler "Fehler beim Hochladen von Dateien": Hochgeladene Bytes überschreiten die Dateigröße. Können Sie bitte die Ursache vorschlagen?
Jay Maharjan
2
@ JayMaharjan Sind Sie sicher, dass die maxFileSize richtig konfiguriert ist?
YoBre
1
Nachdem ich die richtige Konfiguration in php.ini vorgenommen habe, kann ich jetzt große Dateien hochladen. Danke für Ihre Hilfe. :)
Jay Maharjan
In meinem Fall wurde die Größe des GIF geändert und in PNG konvertiert, und der Filter für GIF schlug offensichtlich fehl. Und seltsamerweise fing es an, von selbst zu funktionieren, sobald ich herausgefunden hatte, was los ist. Ich überprüfte doppelt, ob ich etwas mit der Bibliothek gemacht hatte, aber nichts. Alles, was ich eingegeben hatte, waren Konsolenprotokolle, die ich entfernte und die immer noch funktionierten. Das Posten kann also jemandem helfen.
Zia Ul Rehman Mughal

Antworten:

135

Hatte das gleiche Problem und der Blueimp-Typ sagt " maxFileSize und acceptFileTypes werden nur von der UI-Version unterstützt " und hat einen (defekten) Link bereitgestellt, um die Methoden _validate und _hasError einzubeziehen.

Ohne zu wissen, wie man diese Methoden einbindet, ohne das Skript durcheinander zu bringen, habe ich diese kleine Funktion geschrieben. Es scheint für mich zu funktionieren.

Fügen Sie dies einfach hinzu

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

zu Beginn der .fileupload-Optionen, wie in Ihrem Code hier gezeigt

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

Sie werden feststellen, dass ich dort auch eine Dateigrößenfunktion hinzugefügt habe, da dies auch nur in der UI-Version funktioniert.

Aktualisiert, um das von @lopsided vorgeschlagene Problem der Vergangenheit zu erhalten: Hinzugefügt data.originalFiles[0]['type'].lengthund data.originalFiles[0]['size'].lengthin den Abfragen, um sicherzustellen, dass sie vorhanden sind und nicht zuerst leer sind, bevor auf Fehler getestet wird. Wenn sie nicht vorhanden sind, wird kein Fehler angezeigt und es wird nur auf Ihren serverseitigen Fehlertest zurückgegriffen.

PaulMrG
quelle
Das ist wirklich nützlich. Es sollte jedoch beachtet werden, dass dies data.originalFiles[0]['type']beim Hochladen von einem Browser, der die Datei-API nicht unterstützt , leer ist. Dies war auf meinem Android-Handy der Fall. Ich habe es übergeben, wenn dieser Wert nicht verfügbar ist, und dann auf die serverseitige Überprüfung des MIME-Typs zurückgegriffen. Sonst kommt man nie über die acceptFileTypes.testLinie hinaus
schief
@lopsided das ist seltsam, ich erhalte den Wert für data.originalFiles [0] ['type'] und ['size'] auf meinem Android-Handy und es besteht beide Tests. Ich habe tatsächlich Probleme mit meinem Telefon, bei denen scheinbar alles fehlerfrei funktioniert, die Datei jedoch nicht hochgeladen wird. Keine Probleme anderswo, nur das Android.
PaulMrG
8
Ich denke, die Bedingung 'data.originalFiles [0] [' size ']. Length' ist veraltet, daher gibt sie immer false zurück.
kkocabiyik
5
Verwenden Sie data.files [0] ['size'] und data.files [0] ['type']
Jose
2
Verwenden ohne 'Länge' (data.originalFiles [0] ['Größe'] && data.originalFiles [0] ['Größe']> 500000)? 'true': 'false' funktioniert einwandfrei, aber ich möchte wissen, ob mir ein Szenario fehlt. 1. data.originalFiles [0] ['size']? 'true': 'false' (1) gibt false für die Werte 0, null, undefined zurück
Ganesh Arulanantham
48

Sie sollten jquery.fileupload-process.js und jquery.fileupload-validate.js einschließen , damit es funktioniert.

lboullo0
quelle
4
Dies scheint die bessere Antwort zu sein. ;)
Thasmo
7
Die Reihenfolge, in der Sie Skripte laden, ist wichtig, damit die Fehlermeldung angezeigt wird: 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
Das Problem ist das gleiche. Können Sie bitte ein Arbeitsbeispiel angeben?
Vlatko
3
Ich habe das gleiche Problem. Meine JS-Dateien befinden sich in der genau beschriebenen Reihenfolge. Dennoch kann ich Dateien hochladen, die sowohl nicht gemäß dem regulären Ausdruck akzeptiert werden, sondern auch massiv über der Dateigrößenbeschränkung liegen. Ich verwende die neueste FileUpload-Version 9.10.5 mit jQuery 1.11.1
Mr Pablo
3
Funktioniert auch bei mir nicht, selbst wenn alle Skripte in der richtigen Reihenfolge enthalten sind.
BadHorsie
10

Wie in einer früheren Antwort vorgeschlagen, müssen wir zwei zusätzliche Dateien einfügen - jquery.fileupload-process.js und dann jquery.fileupload-validate.jsaber , wie ich einige zusätzliche Ajax - Aufrufe ausführen müssen , während das Hinzufügen einer Datei, ich zum melde mich fileuploadaddEreignis diese Anrufe durchzuführen. In Bezug auf eine solche Verwendung schlug der Autor dieses Plugins Folgendes vor

Bitte schauen Sie hier: https://github.com/blueimp/jQuery-File-Upload/wiki/Options#wiki-callback-options

Das Hinzufügen zusätzlicher Ereignis-Listener über die Bind-Methode (oder die On-Methode mit jQuery 1.7+) ist die bevorzugte Option, um die Rückrufeinstellungen in der UI-Version zum Hochladen von jQuery-Dateien beizubehalten.

Alternativ können Sie die Verarbeitung auch einfach in Ihrem eigenen Rückruf wie folgt starten: https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload-process.js#L50

Mit der Kombination der beiden vorgeschlagenen Optionen funktioniert der folgende Code perfekt für mich

$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);
    });
});
Amith George
quelle
1
Amith, ich habe es versucht und folgende Fehlermeldung erhalten:Uncaught Error: cannot call methods on fileupload prior to initialization; attempted to call method 'process'
TheVillageIdiot
1
Es bedeutet fast immer, dass .fileupload()nicht zum richtigen Zeitpunkt angerufen wurde. Ohne den Code zu sehen, ist es fast unmöglich zu diagnostizieren. Ich schlage vor, eine neue Frage zu öffnen und den entsprechenden Code zu veröffentlichen, vielleicht als jsfiddle.
Amith George
@TheVillageIdiot Versuchen Sie, die Logik für 'fileuploadadd' in der $ fileInput.fileupload-Deklaration festzulegen? Ich hatte einen ähnlichen Fehler, als ich versuchte, Amiths Beispiel in so etwas zu falten: $('#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); }); ... Es war offensichtlich, als ich darüber nachdachte, aber ich versuchte, Logik in etwas zu definieren, das ich noch nicht fertig deklariert hatte.
jdhurst
Ich erhalte
8

Das funktioniert bei mir in 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!.');
    }
});
Nasatom
quelle
3
Willkommen bei Stack Overflow! Könnten Sie diese Antwort bitte so umschreiben, dass sie auf Englisch ist? Ich weiß, dass automatisierte Übersetzer es manchmal schwierig machen können, dies zu sagen, aber Englisch ist die einzige (nicht programmierende) Sprache, die wir hier verwenden.
Pops
15
Wohlgemerkt, Sie müssen kein schlauer Linguist sein, um herauszufinden, dass Nasatome sagt: "Das funktioniert bei mir: Es ist richtig in Firefox." Der Upload-Fehler ist "Dateigröße zu groß". Ich bin Australier und bin mit Englisch aufgewachsen, aber ich denke, es gibt eine gewisse englischsprachige Einstellung. "Englisch ist die einzige Sprache, die wir hier verwenden" ist nicht wahr. Die Leute hier benutzen viele verschiedene Sprachen. Es ist jedoch die Richtlinie dieser Website, Fragen und Antworten auf Englisch zu haben.
Tim Ogilvy
3

Öffnen Sie die Datei mit dem Namen "jquery.fileupload-ui.js". Der Code wird folgendermaßen angezeigt:

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

Fügen Sie einfach einen Zeilencode hinzu - das neue Attribut "acceptFileTypes" wie folgt:

 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

Jetzt wirst du sehen, dass alles in Ordnung ist! ~ Du nimmst das Attribut einfach an eine falsche Stelle.

duan
quelle
Es ist eine schlechte Idee, den Kerncode eines Plugins / einer Bibliothek jemals zu ändern, wenn Sie helfen können.
BadHorsie
3

Wenn Sie alle JS-Plugins importiert haben und in der richtigen Reihenfolge, aber immer noch Probleme haben, scheint es, dass die Angabe Ihres eigenen "Add" -Handlers den des Plugins * -validate.js nerfs, der normalerweise ausgelöst wird Deaktivieren Sie die gesamte Validierung, indem Sie data.process () aufrufen. Um dies zu beheben, führen Sie in Ihrem Event-Handler "Hinzufügen" einfach Folgendes aus:

$('#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);
   });
}
...
});
bigwig87
quelle
Ich habe mein Problem gelöst
Fezfox
2

Geprüftes / gültiges Beispiel für:

  • mehrere Dateieingaben
  • für einen oder mehrere$.grep() Dateien hochladen - um fehlerhafte Dateien aus dem Array zu entfernen
  • imageund audioFormat
  • dynamische Dateitypen aus Zeichenfolge von new RegExp()

Hinweis: acceptFileTypes.test()- Überprüfen Sie die MIME-Typen auf Adio-Dateien, wie .mp3sie sein werden audio/mpeg- nicht nur auf die Erweiterung. Für alle Blueimp-Optionen: 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
Laguna Web Design
quelle
1

Nur ein Beispiel für einen Ereignishandler für Ereignis hinzufügen. Angenommen, die Option singleFileUploads ist aktiviert (dies ist die Standardeinstellung). Lesen Sie mehr jQuery File Upload-Dokumentation zum Binden mit dem Ereignis add / fileuploadadd. Innerhalb der Schleife können Sie beide vars this oder file verwenden . Ein Beispiel für das Abrufen der size-Eigenschaft: this ['size'] oder 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();
        }
    };
DAH
quelle
1

Dies funktionierte für mich in Chrome, jquery.fileupload.js Version ist 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();
        }
    },
Rajendra Thorat
quelle
1
Vielen Dank. Funktioniert auch am 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();                    
    }
Vaibhav M Nalwad
quelle
1

Für den Fall, dass jemand nach allgemein unterstützten Formaten vom Server sucht

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
Arun Prasad ES
quelle
0

Sie können auch eine zusätzliche Funktion verwenden wie:

    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);
    }
Entwickler10214
quelle
0

Sie sollten jquery.fileupload-process.js und jquery.fileupload-validate.js einschließen , damit es funktioniert.

Dann...

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

Der Prozessfehler- Rückruf wird gestartet, nachdem eine Validierung fehlgeschlagen ist.

danielsan80
quelle
0
  • Sie können auch die Dateierweiterung verwenden, um nach dem Dateityp zu suchen.
  • Einfacher wäre es, etwas zu tun, wie unten angegeben.

    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;
                }
      }
Shreelakshmi Iyer
quelle
0

Wenn Sie mehrere Dateien haben, verwenden Sie eine Schleife, um jedes Dateiformat zu überprüfen

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();
      },
Manish S.
quelle