maxFileSize และ acceptFileTypes ในปลั๊กอินอัปโหลดไฟล์ blueimp ไม่ทำงาน ทำไม?

ฉันใช้ปลั๊กอินอัพโหลดไฟล์ Blueimp jQuery สำหรับอัปโหลดไฟล์

ฉันไม่มีปัญหาในการอัปโหลด แต่ตัวเลือกmaxFileSizeและacceptFileTypesไม่ทำงาน

นี่คือรหัสของฉัน:

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

มีปัญหาเดียวกันและ blueimp guy กล่าวว่า " maxFileSize และ acceptFileTypes รองรับเฉพาะเวอร์ชัน UI เท่านั้น " และได้ให้ลิงก์ (เสีย) เพื่อรวมเมธอด _validate และ _hasError

ดังนั้นโดยไม่ทราบวิธีรวมวิธีการเหล่านั้นโดยไม่ทำให้สคริปต์สับสนฉันจึงเขียนฟังก์ชั่นเล็ก ๆ นี้ ดูเหมือนว่าจะได้ผลสำหรับฉัน

เพียงแค่เพิ่มสิ่งนี้

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

ที่จุดเริ่มต้นของตัวเลือก. fileupload ดังที่แสดงในโค้ดของคุณที่นี่

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

คุณจะสังเกตเห็นว่าฉันได้เพิ่มฟังก์ชั่นขนาดไฟล์ไว้ในนั้นด้วยเพราะมันจะใช้ได้เฉพาะในเวอร์ชัน UI เท่านั้น

อัปเดตเพื่อรับปัญหาในอดีตที่แนะนำโดย @lopsided: เพิ่มdata.originalFiles[0]['type'].lengthและdata.originalFiles[0]['size'].lengthในแบบสอบถามเพื่อให้แน่ใจว่ามีอยู่และไม่ว่างเปล่าก่อนที่จะทดสอบข้อผิดพลาด หากไม่มีอยู่จะไม่มีการแสดงข้อผิดพลาดและจะอาศัยการทดสอบข้อผิดพลาดฝั่งเซิร์ฟเวอร์ของคุณเท่านั้น

คุณควรรวมjquery.fileupload-process.jsและjquery.fileupload-validate.jsเพื่อให้ใช้งานได้

ตามที่แนะนำไว้ในคำตอบก่อนหน้านี้เราจำเป็นต้องรวมไฟล์เพิ่มเติมอีกสองไฟล์jquery.fileupload-process.jsจากนั้นjquery.fileupload-validate.jsอย่างไรก็ตามเนื่องจากฉันจำเป็นต้องทำการโทร ajax เพิ่มเติมในขณะที่เพิ่มไฟล์ฉันกำลังสมัครเข้าร่วมfileuploadaddกิจกรรมเพื่อทำการโทรเหล่านั้น เกี่ยวกับการใช้งานดังกล่าวผู้เขียนปลั๊กอินนี้แนะนำสิ่งต่อไปนี้

โปรดดูที่นี่: https://github.com/blueimp/jQuery-File-Upload/wiki/Options#wiki-callback-options

การเพิ่มตัวฟังเหตุการณ์เพิ่มเติมผ่านวิธีการผูก (หรือบนเมธอดด้วย jQuery 1.7+) เป็นตัวเลือกที่ต้องการเพื่อรักษาการตั้งค่าการโทรกลับโดยเวอร์ชัน UI ของ jQuery File Upload

หรือคุณสามารถเริ่มการประมวลผลในการเรียกกลับของคุณเองได้เช่นนี้: https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload-process.js#L50

การใช้สองตัวเลือกที่แนะนำร่วมกันทำให้โค้ดต่อไปนี้เหมาะสำหรับฉัน

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

สิ่งนี้ใช้ได้กับฉันใน 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!.');
    }
});

เปิดไฟล์ชื่อ "jquery.fileupload-ui.js" คุณจะเห็นรหัสดังนี้:

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

เพียงเพิ่มโค้ดหนึ่งบรรทัด --- แอตทริบิวต์ใหม่ "acceptFileTypes" ดังนี้:

 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

ตอนนี้คุณจะเห็นทุกอย่างเรียบร้อยแล้ว! ~ คุณแค่ใช้แอตทริบิวต์ผิดที่

หากคุณได้นำเข้าปลั๊กอิน JS ทั้งหมดและอยู่ในลำดับที่ถูกต้อง แต่คุณยังคงประสบปัญหาอยู่ดูเหมือนว่าการระบุตัวจัดการ "เพิ่ม" ของคุณเองจะทำการเนิร์ฟจากปลั๊กอิน * -validate.js ซึ่งโดยปกติจะเริ่มทำงาน ปิดการตรวจสอบความถูกต้องทั้งหมดโดยเรียก data.process () ดังนั้นในการแก้ไขให้ทำสิ่งนี้ในตัวจัดการเหตุการณ์ "เพิ่ม" ของคุณ:

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

ตรวจสอบ / ตัวอย่างที่ถูกต้องสำหรับ:

• อินพุตไฟล์หลายไฟล์
• สำหรับการอัปโหลดไฟล์เดียวหรือหลายไฟล์ - $.grep()เพื่อลบไฟล์จากอาร์เรย์ที่มีข้อผิดพลาด
• imageและaudioรูปแบบ
• ประเภทไฟล์ไดนามิกจากสตริงโดย new RegExp()

ข้อสังเกต: acceptFileTypes.test()- ตรวจสอบประเภท mime สำหรับไฟล์ adio ที่เป็นเช่น.mp3นั้นaudio/mpeg- ไม่ใช่แค่การขยายเท่านั้น สำหรับตัวเลือก 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

เป็นเพียงตัวอย่างของตัวจัดการเหตุการณ์สำหรับเพิ่มเหตุการณ์ ถือว่าอ็อพชัน singleFileUploads ถูกเปิดใช้งาน (ซึ่งเป็นค่าดีฟอลต์) อ่านเอกสารการอัปโหลดไฟล์ jQuery เพิ่มเติมเกี่ยวกับวิธีเชื่อมโยงกับเหตุการณ์ add / fileuploadadd ภายในห่วงคุณสามารถใช้ทั้ง vars นี้หรือไฟล์ ตัวอย่างของการได้รับคุณสมบัติขนาดนี้ [ 'ขนาด']หรือ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();
        }
    };

สิ่งนี้ใช้ได้กับฉันใน chrome เวอร์ชัน jquery.fileupload.js คือ 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();
        }
    },

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

เผื่อว่าใครที่กำลังมองหารูปแบบที่เซิร์ฟเวอร์รองรับ

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

คุณยังสามารถใช้ฟังก์ชันพิเศษเช่น:

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

คุณควรรวมjquery.fileupload-process.jsและjquery.fileupload-validate.jsเพื่อให้ใช้งานได้

จากนั้น ...

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

การเรียกกลับprocessfailถูกเรียกใช้หลังจากการตรวจสอบล้มเหลว

• คุณยังสามารถใช้นามสกุลไฟล์เพื่อตรวจสอบประเภทไฟล์ได้อีกด้วย

• วิธีที่ง่ายกว่านั้นคือการทำบางสิ่งตามที่ระบุด้านล่างภายในเพิ่ม

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

หากคุณมีไฟล์หลายไฟล์คุณจะใช้ลูปเพื่อตรวจสอบรูปแบบไฟล์แต่ละไฟล์เช่นนี้

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