jQuery FileUpload nie wyzwala 'done'

Question

Używam wtyczki jQuery-File-Upload. Napisałem prosty kod, żeby go przetestować - i działa, ale nie bez problemów. Nie wyzwala ona done, nawet jeśli plik został przesłany, a pasek postępu osiągnął koniec.

Oto kod:

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

Mój wkład jest tak proste, jak:

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

Answer 1

Zmieniłem kilka rzeczy i to działa. Tutaj:

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

     } 


    }); 

działa idealnie dla mnie;

różnice są

• URL jest ustawiony (mam nadzieję, że po prostu zapomniał umieścić go w swoim fragmencie tutaj);

• sposób mogę dodać plik do kolejki pobierania

• sekwencyjnego przesyłania

edit (?):

Upload pliku plugin jQuery używa jQuery.ajax() dla żądania przesłania pliku . Dotyczy to również przeglądarek bez obsługi XHR, dzięki wtyczce Iframe Transport.

Opcje ustawione dla wtyczki File Upload są przekazywane do jQuery.ajax() i umożliwiają zdefiniowanie dowolnych ustawień ajaxowych lub wywołań zwrotnych. Opcje ajax processData, contentType i cache są ustawione na false, aby plik został przesłany do pracy i nie powinien być zmieniany.

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

gdzieś w kodzie można zmieniły również te ajax ustawienia; tak czy inaczej, że jeśli ustawienia są poprawne, ponieważ używają $ .ajax, to nie można wyzwolić

Answer 3

ja naprawić autoUpload: true, to wygląda, gdy właściwość autoUpload nie jest ustawiony (nawet jeśli przesyłanie działa zgodnie z oczekiwaniami) done zdarzenie nie jest uruchomiony.

Answer 4

Jeśli serwer nie zwraca JSON, spróbuj usunąć:

dataType: 'json' 

W przeciwnym razie możesz zostać kończąc fail zdarzenie, które jest łatwe do sprawdzenia dla:

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

Answer 5

eksperymentował już dziś! Jeśli używasz PHP, upewnij się, że twój plik PHP uploadhanler nie wyświetla błędu lub ostrzeżenia.Tworzy złe wyniki JSON, a kiedy plik zostanie załadowany, wtyczka nie może wysłać poprawnego bufora JSON z wykonanym zdarzeniem.

Do śledzenia błędów w pliku PHP lepiej jest zapisać plik dziennika zamiast błędów wyświetlania na takich skryptach. można użyć:

error_reporting(0) 

Ale NIE ZAPOMNIJ dodać śledzenie błędów w pliku dziennika. Oczywiście !

Answer 6

Spróbuj this Callback Option jak opisano w dokumentacji:

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

to na pewno działa na mnie.

Answer 7

Używam multer, culter-azure-storage i blueimp-file-upload. wszystkie serwowane z unpkg.com. poniżej jest przesyłanie wielu plików z wykonanym wyzwalaczem. działa od 10/22/17.

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

strona html, podawane z Express:

 $('#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-ofert/edit/[właściwość id]/galeria

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-listingings/edit/[identyfikator nieruchomości]/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(); 
    } 
);