Soru blueimp dosya yükleme eklentisinde maxFileSize ve acceptFileTypes çalışmıyor. Niye ya?


Yükleme dosyaları için Blueimp jQuery dosya yükleme eklentisini kullanıyorum.

Yükleme sırasında sorunum olmadı, ancak seçenek maxFileSize ve acceptFileTypes çalışma.

Bu benim kodum:

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


Menşei


Merhaba, dosya yükleme için bu kodu uygulamaya çalışıyorum ama hata mesajı alıyorum: Dosya yükleme hatası: Yüklenen baytlar dosya boyutunu aşıyor Neden sorunun ne olduğunu önerebilir misiniz? - Jay Maharjan
@JayMaharjan maxFileSize'in düzgün yapılandırıldığından emin misiniz? - YoBre
Php.ini dosyasında doğru yapılandırmayı yaptıktan sonra şimdi büyük dosyaları yükleyebiliyorum. Yardımın için teşekkürler. :) - Jay Maharjan
Benim durumum için, gif yeniden boyutlandırılıyor ve png'ye dönüştürülüyordu ve daha sonra gif için filtreleniyordu. Ve garip bir şekilde, ne olup bittiğini anladığım kadarıyla çalışmaya başladı, kütüphaneyle bir şeyler yapıp yapmadığımı iki katına çıkardım ama hiçbir şey koymuş olduğum konsol günlükleri çıkardım ve hala çalışıyordum. Gönderme, bu birilerine yardımcı olabilir. - Zia Ul Rehman Mughal


Cevaplar:


Aynı problem vardı ve blueimp adam diyor ki "maxFileSize ve acceptFileTypes yalnızca UI sürümü tarafından desteklenir"ve _validate ve _hasError yöntemlerini dahil etmek için bir (kırık) bağlantı sağladı.

Yani, bu yöntemleri nasıl betimlemeden bilmeden, bu küçük işlevi yazdım. Benim için çalışıyor gibi görünüyor.

Sadece ekle

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

kodunuzda gösterildiği gibi .fileupload seçeneklerinin başında

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

Orada bir dosya işlevi eklediğimi de fark edeceksiniz, çünkü bu yalnızca UI sürümünde çalışacaktır.

@Lopsided tarafından önerilen geçmiş sorunu almak için güncellendi: Eklendi data.originalFiles[0]['type'].length ve data.originalFiles[0]['size'].length Sorgularda var olduklarından emin olmak için hatalar test etmeden önce boş değiller. Eğer yoksa, hiçbir hata gösterilmeyecek ve sadece sunucu tarafındaki hata testine güvenilecektir.


127
2017-07-14 06:03



Bu gerçekten yararlıdır. Ancak dikkat edilmelidir ki data.originalFiles[0]['type'] Dosya API'sini desteklemeyen bir tarayıcıdan yüklenirken boştur. Bu benim Android telefonumda durum buydu. Yaptığım şey, bu değer kullanılamıyorsa ve sunucu tarafındaki mime türü doğrulamaya geri dönerse, bunu iletmekti. Aksi halde asla geçemezsiniz. acceptFileTypes.test hat - lopsided
Tuhaf olan @lopsided, Android telefonumda data.originalFiles [0] ['type'] ve ['size'] için değer elde ediyorum ve her iki testi de geçiyor. Telefonumda, her şeyin hatasız çalıştığı göründüğü halde sorun yaşıyorum ancak dosya yüklenmiyor. Başka hiçbir yerde sorun yok, sadece Android. - PaulMrG
'Data.originalFiles [0] [' size ']. Length' koşulunun kullanımdan kaldırıldığını düşünüyorum, bu nedenle her zaman false değerini döndürür. - kkocabiyik
Data.files [0] ['size'] ve data.files [0] ['type'] kullanın - Jose
"Uzunluk" olmadan kullanmak (data.originalFiles [0] ['size'] && data.originalFiles [0] ['size']> 500000)? 'true': 'false' iyi çalışıyor, ancak herhangi bir senaryoyu kaçırıp kaçırmadığımı bilmek istiyorum 1. data.originalFiles [0] ['size']? 'true': 'false' (1) 0, null, undefined değerleri için false değerini döndürür - Ganesh Arulanantham


Eklemelisin jquery.fileupload-process.js ve jquery.fileupload-validate.js çalışmasını sağlamak için.


43
2017-11-19 16:15



Bu daha iyi bir cevap gibi görünüyor. ;) - Thasmo
Maalesef sorunu çözmüyor. - Paul
Komut dosyası yüklediğiniz sıra, hata iletisini almak için önemlidir: tmpl.min.js> jquery.ui.widget.js> jquery.iframe-transport.js> jquery.fileupload.js> jquery.fileupload-ui.js> jquery.fileupload-process.js> jquery.fileupload-validate.js - FAjir
Sorun aynı, lütfen biraz çalışma örneği verebilir misiniz? - Vlatko
Aynı sorunu yaşıyorum. Benim JS dosyaları açıklanan tam düzende, ancak hala her ikisi de regex göre kabul edilmez dosyaları yükleyebilir, ancak aynı zamanda dosya boyutu sınırı üzerinde büyük ölçüde. JQuery 1.11.1 ile en son FileUpload sürümünü, 9.10.5 kullanıyorum - Mr Pablo


Daha önceki bir cevapta önerildiği gibi, iki ek dosya eklememiz gerekiyor - jquery.fileupload-process.js ve sonra jquery.fileupload-validate.js Ancak bir dosya eklerken bazı ek ajax çağrıları yapmam gerektiğinden, fileuploadadd Bu aramaları gerçekleştirmek için olay. Böyle bir kullanımla ilgili olarak bu eklentinin yazarı aşağıdaki önerdi

Lütfen buraya bir göz atın:    https://github.com/blueimp/jQuery-File-Upload/wiki/Options#wiki-callback-options

JQuery File Upload UI sürümü ile geri arama ayarlarını korumak için bağlama yoluyla ek olay dinleyicileri ekleme (veya jQuery 1.7+ yöntemiyle) yöntemi tercih edilir.

Alternatif olarak, işlemi yalnızca kendi geriçağırımınızda başlatabilirsiniz, bunun gibi:    https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.fileupload-process.js#L50

Önerilen iki seçeneğin kombinasyonunu kullanarak, aşağıdaki kod benim için mükemmel çalışıyor

$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, bunu denedim ve aşağıdaki hatayı aldım: Uncaught Error: cannot call methods on fileupload prior to initialization; attempted to call method 'process' - TheVillageIdiot
Neredeyse her zaman .fileupload() uygun zamanda çağrılmadı. Kodu görmeden, teşhis etmek neredeyse imkansız. Yeni bir soru açmayı ve ilgili kodu, belki bir jsfiddle olarak yayınlamayı öneririm. - Amith George
@TheVillageIdiot $ fileInput.fileupload bildiriminde 'fileuploadadd' mantığını kurmaya çalışıyor musunuz? Amith'in örneğini böyle bir şeyin içine katlamaya çalıştığımda benzer bir hata yaşadım: $('#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); }); ...  Bunu düşündüğüm zaman belliydi, ama henüz bildirmediğim bir şeyde mantığı tanımlamaya çalışıyordum. - jdhurst
Bu hatayı alıyorum: Yakalanmamış ReferenceError: makeAjaxCall - rida mukhtar


Bu benim için firefox'ta çalışıyor

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



Yığın Taşması'na Hoş Geldiniz! Bu cevabı tekrar yazabilmeniz için lütfen bu kelimeyi tekrar yazabilir misiniz? Otomatik çevirmenlerin bazen zor anlatabildiğini biliyorum, ancak İngilizce burada kullandığımız tek programlama dili değil. - Pops
Nasatomun "Bu benim için geçerli: Firefox'ta doğru." dediğini anlayabilmek için kurnaz bir dil uzmanı olmak zorunda değilsiniz. Yükleme hatası "dosya boyutu çok büyük". Ben Avusturalyalıyım ve İngilizce konuşarak büyüdüm, ama inanıyorum ki belirli bir İngilizce konuşma tavrı var. "Burada kullandığımız tek dil İngilizce'dir" doğru değildir. Buradaki insanlar birçok farklı dil kullanıyor. Ancak, bu sitenin İngilizcede soru ve cevapları vardır. - Tim Ogilvy


Tüm eklenti JS'leri içe aktarılmış ve doğru sırada bulunuyorsa, ancak hala sorun yaşıyorsanız, normalde tetiklenecek olan "eklenti" işleyicinizin * -validate.js eklentisinden birini belirlemesi gibi görünüyor. data.process () öğesini çağırarak tüm doğrulamayı kapat. Bu yüzden düzeltmek için "add" olay işleyicinizde böyle bir şey yapın:

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

3
2018-02-16 20:12



Sorunumu çözdüm - fezfox


"jquery.fileupload-ui.js" isimli dosyayı açın, aşağıdaki gibi kodu göreceksiniz:

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

Sadece bir satır kodu ekleyin --- bu gibi "acceptFileTypes" yeni özniteliği:

 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

şimdi herşeyin yolunda olduğunu göreceksiniz! özniteliği yanlış bir yere götürürsünüz.


2
2017-10-10 07:31



Bu cevap, UI olmayan sürümde çalışmayacak - PaulMrG
Yardımcı olabileceğiniz bir eklentinin / kütüphanenin çekirdek kodunu değiştirmek hiçte kötü bir fikir. - BadHorsie


İçin kontrol edilen / Geçerli örnek:

  • çoklu dosya girişleri
  • biri için veya ÇOKLU DOSYALAR yükleme - $.grep() diziden dosyaları hatalarla kaldırmak için
  • image ve audiobiçim
  • dize tarafından dinamik dosya türleri new RegExp()

Uyarı: acceptFileTypes.test() - Mio tiplerini kontrol edin, adio gibi .mp3 Olacak audio/mpeg - sadece uzatma değil. Tüm blueimp seçenekleri için: 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





Etkinlik ekle için yalnızca olay işleyicisine bir örnek. SingleFileUploads seçeneğinin etkinleştirildiğini varsayar (varsayılan değer). Daha fazla bilgi jQuery File add / fileuploadadd olayıyla nasıl ciltleneceğini belgeler. İç döngü her iki var kullanabilirsiniz bu veya dosya. Boyut özelliği almanın bir örneği: Bu [ 'boyutu'] veya Dosya boyutu.

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





Bu benim için kromda çalıştı, jquery.fileupload.js sürümü 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



Teşekkürler. 9.21'de de çalışıyor. - geca


.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
2017-10-15 10:03





Ayrıca, aşağıdaki gibi ekstra bir işlev de kullanabilirsiniz:

    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
2017-10-29 01:49