jQuery FileUpload non si attiva 'terminato'

Question

Uso il plugin jQuery-File-Upload. Ho scritto un semplice codice per testarlo - e funziona, ma non senza problemi. Non si attiva done, anche se il file è stato caricato e la barra di avanzamento ha raggiunto la fine.

Ecco il codice:

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

mio ingresso è così semplice come sembra:

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

Answer 1

Ho cambiato un paio di cose e funziona. Qui:

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

     } 


    }); 

opere perfettamente per me;

differenze sono

• l'url è impostato (spero che solo dimenticato di mettere nel vostro frammento qui);

• il mio modo di aggiungere il file alla coda di download

• Upload sequenziale

di modifica (?):

Il jQuery File Upload plug fa uso di jQuery.ajax() per le richieste di caricamento del file . Questo è vero anche per i browser che non supportano l'XHR , grazie al plugin Iframe Transport.

Le opzioni impostate per il plug-in Caricamento file vengono passate a jQuery.ajax() e consentono di definire qualsiasi impostazione Ajax o callback. Le opzioni Ajax processData, contentType e cache sono impostate su false per il caricamento del file e non devono essere modificate.

https://github.com/blueimp/jQuery-File-Upload/wiki/Options

da qualche parte nel codice si potrebbe avere anche cambiato le impostazioni ajax; comunque, se le tue impostazioni sono corrette visto che si sta utilizzando $ .ajax, il fatto non può essere attivato

Answer 3

ho riparato con autoUpload: vero, sembra che quando la proprietà autoUpload non è impostata (anche se di upload sta funzionando come previsto) l'evento fatto non viene attivato.

Answer 4

Se il server non restituisce JSON, provare a rimuovere:

dataType: 'json' 

altrimenti si può essere finire con un evento, che è facile da testare per fallire:

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

Answer 5

Sperimentato oggi! Se stai utilizzando PHP, assicurati che il tuo file PHP uploadhanler non visualizzi errori o avvisi.Crea un cattivo output JSON e quando il tuo file viene caricato, il plugin non può inviare un buffer JSON corretto con l'evento done.

Per il tracciamento degli errori nel file PHP, è meglio scrivere un file di registro invece di visualizzare errori su tali script. È possibile utilizzare:

error_reporting(0) 

Ma Non dimenticare aggiungere tracciamento errore in un file di log. Ovviamente !

Answer 6

Prova this Callback Option come descritto nella documentazione:

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

funziona sicuro per me.

Answer 7

sto usando multer, multer-azure-storage e blueimp-file-upload. tutto servito da unpkg.com. di seguito è un caricamento di file multipli con il trigger fatto. funzionante al 22/10/17.

js di file:

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

pagina html, servita dalle espresso:

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

// GET/my-liste/modificare/[id proprietà]/galleria

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