Il caricamento di un file zip utilizzando POST in JavaScript non funziona in modo silenzioso

Sto lavorando a un’applicazione web (utilizzando JQuery versione 2.2.4) che consente agli utenti di inviare immagini e dati al nostro server. Quando gli utenti decidono di caricare i loro contributi, il mio codice dovrebbe generare un file zip usando la libreria JSZip e caricarlo sul nostro server usando POST. Dopo aver cercato qui su StackExchange, ho trovato questo codice:

var zip = new JSZip(); // Create the object representing the zip file // ...Add the data and images console.log('Generating compressed archive...'); zip.generateAsync({ compression: 'DEFLATE', type: 'blob' }).then(function(zc) {// Function called when the generation is complete console.log('Compression complete!'); // Create file object to upload var fileObj = new File([zc], fileName); console.log('File object created:', fileObj); $.post('http://myurl/submit', { data: fileObj, }).done(function() { console.log('Ajax post successful.'); }) .fail(function(jqXHR, textStatus, errorThrown) { console.log('Ajax post failed. Status:', textStatus); console.log(errorThrown); }); }); 

Il mio codice stampa il messaggio File object created , l’object file stesso sembra OK, ma poi non ottengo altro. Un fallimento silenzioso. La chiamata POST non appare nemmeno nel pannello Rete per Firebug.

Dopo ulteriori ricerche, ho anche provato ad aggiungere questo codice in anticipo:

 $(document).ajaxError(function(event, jqxhr, settings, thrownError) { console.log('Ajax post failed. Event:', event); console.log('Ajax settings:', settings); console.log(thrownError); }); 

Ma questo non viene triggersto. C’è chiaramente qualche errore che sto facendo nell’impostare i callback per gli errori – cosa potrei provare?

    Penso che non vedi alcun POST perché il tuo object dati non contiene solo valori stringa (ottengo un POST se uso {data: "content"} ).

    Seguendo https://stackoverflow.com/a/19015673 e https://stackoverflow.com/a/18254775 , è necessario aggiungere alcuni parametri ( documentazione ):

     $.post({ url: "/test", data: fileObj, contentType: false, processData: false }) 

    Sono riuscito a far funzionare il caricamento creando un object FormData e inserendo il mio file in esso. Ecco il codice:

     var zip = new JSZip(); // Create the object representing the zip file // ...Add the data and images console.log('Generating compressed archive...'); zip.generateAsync({ compression: 'DEFLATE', type: 'blob' }).then(function(zc) {// Function called when the generation is complete console.log('Compression complete!'); // Create file object to upload var fileObj = new File([zc], fileName); console.log('File object created:', fileObj); var fd = new FormData(); fd.append('fileName', fileName); fd.append('file', fileObj); fd.append('mimeType', 'application/zip'); // POST Ajax call $.ajax({ type: 'POST', url: 'http://myurl/submit', data: fd, contentType: false, processData: false, }).done(function() { console.log('Ajax post successful.'); }).fail(function(jqXHR, textStatus, errorThrown) { console.log('Ajax post failed. Status:', textStatus); console.log(jqXHR); console.log(errorThrown); }); }); 

    Questo è stato ispirato dalle altre risposte StackExchange collegate a David Duponchel.