Domanda Come posso caricare i file in modo asincrono?


Vorrei caricare un file in modo asincrono con jQuery. Questo è il mio HTML:

<span>File</span>
<input type="file" id="file" name="file" size="10"/>
<input id="uploadbutton" type="button" value="Upload"/>

E qui il mio Jquery codice:

$(document).ready(function () {
    $("#uploadbutton").click(function () {
        var filename = $("#file").val();

        $.ajax({
            type: "POST",
            url: "addFile.do",
            enctype: 'multipart/form-data',
            data: {
                file: filename
            },
            success: function () {
                alert("Data Uploaded: ");
            }
        });
    });
});

Invece del file che viene caricato, ricevo solo il nome file. Cosa posso fare per risolvere questo problema?

Soluzione corrente

Sto usando il jQuery Form Plugin per caricare file.


2606
2017-10-03 10:22


origine


risposte:


Con HTML5 puoi caricare file con Ajax e jQuery. Non solo, puoi fare convalide di file (nome, dimensione e tipo MIME) o gestire l'evento progress con il tag di progresso HTML5 (o un div). Di recente ho dovuto creare un uploader di file, ma non volevo usarlo Veloce né iframe o plugin e dopo alcune ricerche ho trovato la soluzione.

L'HTML:

<form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

Per prima cosa, puoi fare un po 'di validazione se vuoi. Ad esempio, nell'evento onChange del file:

$(':file').on('change', function() {
    var file = this.files[0];
    if (file.size > 1024) {
        alert('max upload size is 1k')
    }

    // Also see .name, .type
});

Ora l'Ajax invia con il clic del pulsante:

$(':button').on('click', function() {
    $.ajax({
        // Your server script to process the upload
        url: 'upload.php',
        type: 'POST',

        // Form data
        data: new FormData($('form')[0]),

        // Tell jQuery not to process data or worry about content-type
        // You *must* include these options!
        cache: false,
        contentType: false,
        processData: false,

        // Custom XMLHttpRequest
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                // For handling the progress of the upload
                myXhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        $('progress').attr({
                            value: e.loaded,
                            max: e.total,
                        });
                    }
                } , false);
            }
            return myXhr;
        }
    });
});

Come puoi vedere, con HTML5 (e alcune ricerche) il caricamento di file non solo diventa possibile ma anche molto facile. Provalo con Google Chrome alcuni componenti HTML5 degli esempi non sono disponibili in tutti i browser.


2335
2018-01-06 13:34



Ci sono vari plugin pronti all'uso per caricare file per jQuery.

Fare questo tipo di caricamento degli hack non è un'esperienza piacevole, quindi alle persone piace usare soluzioni già pronte.

Ecco alcuni:

Puoi cercare altri progetti su NPM (usando "jquery-plugin" come parola chiave) o su Github.


334
2017-10-15 10:35



Aggiornamento 2017: dipende ancora dai browser il tuo usi demografici.

Una cosa importante da capire con il "nuovo" HTML5 file API è quello non è stato supportato fino a IE 10. Se il mercato specifico a cui miri ha una preponderità superiore alla media verso versioni precedenti di Windows, potresti non accedervi.

Verso il 2017, circa il 5% dei browser è uno di IE 6, 7, 8 o 9. Se ti rechi in una grande azienda (ad es. Questo è uno strumento B2B o qualcosa che stai offrendo per la formazione) quel numero può esplodere. Solo pochi mesi fa, nel 2016, mi sono occupato di un'azienda che utilizzava IE8 su oltre il 60% delle loro macchine.

Quindi prima di fare qualsiasi cosa: controlla quale browser il tuo gli utenti usano. Se non lo fai, imparerai una lezione rapida e dolorosa sul perché "lavora per me" non è abbastanza buono in un deliverable per un cliente.

La mia risposta dal 2008 segue.


Tuttavia, esistono metodi non JS validi per il caricamento di file. Puoi creare un iframe sulla pagina (che nascondi con i CSS) e quindi indirizzare il tuo modulo per postare su quell'iframe. La pagina principale non ha bisogno di spostarsi.

È un post "reale" quindi non è completamente interattivo. Se hai bisogno di uno stato hai bisogno di qualcosa sul lato server per elaborarlo. Questo varia in modo massiccio a seconda del tuo server. ASP.NET ha meccanismi più belli. PHP non funziona, ma puoi usare Perl o modifiche di Apache per aggirarlo.

Se hai bisogno di più caricamenti di file, è meglio fare ogni file uno alla volta (per superare i limiti massimi di caricamento del file). Pubblica il primo modulo sull'iframe, monitora i suoi progressi usando quanto sopra e quando ha finito, pubblica il secondo modulo sull'iframe e così via.

O utilizzare una soluzione Java / Flash. Sono molto più flessibili in quello che possono fare con i loro post ...


237
2017-10-03 10:41



Raccomando di usare il Fine Uploader plugin per questo scopo. Il tuo JavaScript il codice sarebbe:

$(document).ready(function() {
  $("#uploadbutton").jsupload({
    action: "addFile.do",
    onComplete: function(response){
      alert( "server response: " + response);
    }
  });
});

105
2017-11-21 16:38



Nota: questa risposta è obsoleta, ora è possibile caricare file usando XHR.


Non puoi caricare file usando XMLHttpRequest (Ajax). Puoi simulare l'effetto usando un iframe o Flash. L'eccellente jQuery Form Plugin che pubblica i tuoi file attraverso un iframe per ottenere l'effetto.


87
2017-10-03 10:36



Questo Plugin jQuery di caricamento file AJAX carica il file somehwere e passa il risposta a un callback, nient'altro.

  • Non dipende da HTML specifico, basta dargli un <input type="file">
  • Non richiede che il tuo server risponda in un modo particolare
  • Non importa quanti file usi o dove si trovano sulla pagina

- Usa meno di -

$('#one-specific-file').ajaxfileupload({
  'action': '/upload.php'
});

- o tanto quanto -

$('input[type="file"]').ajaxfileupload({
  'action': '/upload.php',
  'params': {
    'extra': 'info'
  },
  'onComplete': function(response) {
    console.log('custom handler for file:');
    alert(JSON.stringify(response));
  },
  'onStart': function() {
    if(weWantedTo) return false; // cancels upload
  },
  'onCancel': function() {
    console.log('no file selected');
  }
});

81
2017-07-29 00:34



Conclusione per i futuri lettori.

Caricamento file asincrono

Con HTML5

Puoi caricare file con jQuery usando il $.ajax() metodo se formdata e il File API sono supportati (entrambe le funzionalità HTML5).

Puoi anche inviare file senza FormData ma in entrambi i casi l'API del file deve essere presente per elaborare i file in modo che possano essere inviati con XMLHttpRequest (Ajax).

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  data: new FormData($('#formWithFiles')[0]), // The form with the file inputs.
  processData: false,
  contentType: false                    // Using FormData, no need to process data.
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

Per un JavaScript veloce e puro (no jQuery) esempio vedi "Invio di file utilizzando un oggetto FormData".

Ricaderci

Quando HTML5 non è supportato (no File API) l'unica altra soluzione JavaScript pura (n Veloce o qualsiasi altro plugin per il browser) è il iframe nascosto tecnica, che consente di emulare una richiesta asincrona senza utilizzare il XMLHttpRequest oggetto.

Consiste nell'impostare un iframe come destinazione del modulo con gli input del file. Quando l'utente invia una richiesta viene effettuata e i file vengono caricati ma la risposta viene visualizzata all'interno dell'iframe invece di ripetere il rendering della pagina principale. Nascondere l'iframe rende l'intero processo trasparente per l'utente ed emula una richiesta asincrona.

Se fatto correttamente dovrebbe funzionare virtualmente su qualsiasi browser, ma ha alcuni avvertimenti su come ottenere la risposta dall'iframe.

In questo caso potresti preferire usare un plugin di wrapper come Bifröst che usa il tecnica iframe ma fornisce anche a trasporto jQuery Ajax permettendo a inviare file con solo il $.ajax() metodo come questo:

$.ajax({
  url: 'file/destination.html', 
  type: 'POST',
  // Set the transport to use (iframe means to use Bifröst)
  // and the expected data type (json in this case).
  dataType: 'iframe json',                                
  fileInputs: $('input[type="file"]'),  // The file inputs containing the files to send.
  data: { msg: 'Some extra data you might need.'}
}).done(function(){
  console.log("Success: Files sent!");
}).fail(function(){
  console.log("An error occurred, the files couldn't be sent!");
});

plugin

Bifröst è solo un piccolo wrapper che aggiunge il supporto di fallback al metodo Ajax di jQuery, ma molti dei plug-in sopracitati jQuery Form Plugino caricamento file jQuery includi l'intero stack da HTML5 a diversi fallback e alcune funzioni utili per facilitare il processo. A seconda delle esigenze e dei requisiti, potresti prendere in considerazione un'implementazione nuda o uno di questi plugin.


75
2017-08-25 14:17