jQuery FileUpload tetiklemiyor 'done'

Question

jQuery-File-Upload eklentisini kullanıyorum. Bunu test etmek için basit bir kod yazdım - ve çalışıyor, ancak sorunsuz değil. Dosya yüklüyse ve ilerleme çubuğu sonuna ulaşmış olsa bile, done'u tetiklemez.

$('#file_file').fileupload({ 
    dataType: 'json', 
    autoUpload: true, 
    add: function (e, data) { 
     data.context = $('<p/>').text('Uploading...').appendTo(document.body); 
     data.submit(); 
    }, 
    progressall: function (e, data) { 
     var progress = parseInt(data.loaded/data.total * 100, 10); 
     $('#progress .bar').css(
      'width', 
      progress + '%' 
     ); 
    }, 
    done: function (e, data) { 
     alert('Done'); 
    } 
}); 

Benim girdi o kadar basittir: Burada

kod

<input type="file" id="file_file" name="file[file]" /> 

Answer 1

tetiklenemediğini söylerim, birkaç şeyi değiştirdim ve işe yarıyor. İşte:

$('#file_file').fileupload({ 
    autoUpload: true, 
    add: function (e, data) { 
     $('body').append('<p class="upl">Uploading...</p>') 
     data.submit(); 
    }, 
    progressall: function (e, data) { 
     var progress = parseInt(data.loaded/data.total * 100, 10); 
     $('#progress .bar').css(
      'width', 
      progress + '%' 
     ); 
    }, 
    done: function (e, data) { 
     $('.upl').remove(); 
     $.each(data.files, function (index, file) { 
      /**/ 
     }); 
    } 
}); 

Answer 2

$(input).fileupload(

     url  : '...' 

     ,dataType : 'json' 
     ,sequentialUploads : true 

     ,add  : function (e,data) { 


      $.each(data.files,function(i,file){ 

       file.jqXHR = data.submit() 
          .success(function (result, textStatus, jqXHR) {/* ... */}) 
          .error(function (jqXHR, textStatus, errorThrown) { 
          }) 
          .complete(function (result, textStatus, jqXHR) { 
           //...     
            }); 

       }); 
     } 


     ,done: function (e, data) { 
     console.log(data); 

     } 


    }); 

benim için mükemmel

eserler;

farklar (i sadece burada Snippet'inizdeki koymak unuttum umut) url ayarlanır

• vardır;

• i indir kuyruğuna dosya eklemek yolu

• sıralı yükleme

düzenlemek (?):

jQuery Dosya Yükleme eklentisi jQuery.ajax yararlanır() dosya için yükleme istekleri. Bu, Iframe Transport eklentisi sayesinde XHR desteği olmayan tarayıcılarda bile geçerlidir.

Dosya Yükleme eklentisi için ayarlanan seçenekler jQuery.ajax() 'a geçirilir ve ajax ayarlarını veya geri çağrılarını tanımlamaya izin verilir. Ajax processData, contentType ve önbellek seçenekleri, dosyalarının yüklenmesi için yanlış olarak ayarlanmıştır ve değiştirilmemelidir. yere Kodunuzdaki alabilsem içinde https://github.com/blueimp/jQuery-File-Upload/wiki/Options

aynı zamanda bu ajax ayarları değiştirildi; her nasılsa, $ .ajax kullanıldığından beri ayarlarınız doğruysa,

Answer 3

Ben autoUpload ile onarılan: true, autoUpload özelliği ayarlı değilken yapılan olayı tetiklenir (yükleme beklendiği gibi çalışıyor olsa bile) gibi görünüyor. Sunucu JSON dönen değilse

Answer 4

, kaldırmayı deneyin:

fail: function(e, data) { 
    alert('Fail!'); 
} 

Answer 5

deney bugün:

dataType: 'json' 

Aksi takdirde bir test etmek kolaydır olay, başarısız ile biten olabilir! PHP kullanıyorsanız, uploadhanler PHP dosyanızın hata veya uyarı göstermediğinden emin olun.Kötü bir JSON çıktısı oluşturur ve dosyanız yüklendiğinde, eklenti yapılan etkinlikle doğru bir JSON tamponu gönderemez.

PHP dosyanızdaki hata izleme için, bu tür komut dosyalarında görüntüleme hataları yerine bir günlük dosyası yazmak daha iyidir. Sen kullanabilirsiniz:

error_reporting(0) 

Ama bir günlük dosyasında hata izleme eklemek için UNUTMAYIN. Tabii ki !

$('#fileupload').bind('fileuploaddone', function (e, data) { 
    alert('Done'); 
}); 

Tabii işler benim için: belgelerinde açıklandığı şekilde

Answer 6

this Callback Option deneyin.

Answer 7

Biçerdöver, multer-azure depolama ve blueimp dosyası yükleme özelliğini kullanıyorum. hepsi unpkg.com'dan servis edildi. Aşağıda, yapılan tetikleyici ile birden çok dosya yüklemesi var. 10/22/17'den itibaren çalışıyor.

js dosyası:

<script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script> 
    <script src="https://unpkg.com/blueimp-file-upload@9.19.1/js/vendor/jquery.ui.widget.js"></script> 
    <script src="https://unpkg.com/blueimp-file-upload@9.19.1/js/jquery.iframe-transport.js"></script> 
    <script src="https://unpkg.com/blueimp-file-upload@9.19.1/js/jquery.fileupload.js"></script> 

sayfa html, express servis:

 $('#fileupload').fileupload({ 
      url: 'https://domainwhatevs/my-listings/edit/[property id]/gallery', 
      paramName: '_file', 
      dataType: 'json', 
      type: 'POST', 
      autoUpload: true, 
      add: function (e, data) { 
       console.log('uploading:', data) 
       data.submit(); 
      }, 
      done: function (e, data) { 
       console.log('done triggered'); 
       console.log(data._response.result.result[0].originalname, 'uploaded at', data._response.result.result[0].url); 
       $.each(data.files, function (index, file) { 
       // console.log(file.name, 'uploaded.') 
       // console.log('done'); 
       // console.log(index); 
       // console.log(file); 
       }); 
       console.log(data); 
      } 
     }); 

// my-listeleri/düzenleme/[mülk kimlik]/galeri/GET

app.get(
    [ 
     '/my-listings/edit/:_id/gallery' 
    ], 
    (req, res) => { 
     console.log('image gallery:', req.params._id); 
     res.render('my-listings--edit--gallery', { 
      _id: req.params._id, 
      session: req.session 
     }); 
    } 
); 

// POST/my-listings/edit/[property id]/gallery

app.post(
    [ 
     '/my-listings/edit/:_id/gallery' 
    ], 
    upload.array('_file'), 
    (req, res, next) => { 
     console.log(req.files); 
     res.setHeader('Content-Type', 'application/json'); 
     res.send({result: req.files}); 
     next(); 
    } 
);