Beispiel für das Hochladen von Dateien mit jQuery HTML5 und FormData

Vor HTML5 gab es eine Reihe von jQuery-Technologien und Plug-Ins zur Implementierung des AJAX-Datei-Uploads. HTML5 führt die FormData-Klasse ein, die das Hochladen von Dateien vereinfacht. In diesem Artikel erfahren Sie anhand eines Beispiels, wie Sie Dateien mit jQuery HTML5 und FormData hochladen.

$('#myform').on('sumbit', function(){
    var form = $(this);
    var formdata = false;
    if (window.FormData)
    {
        formdata = new FormData(form[0]);
    }
    var formAction = form.attr('action');
    $.ajax({
        url         : '/upload',
        data        : formdata ? formdata : form.serialize(),
        cache       : false,
        contentType : false,
        processData : false,
        type        : 'POST',
        success     : function(data, textStatus, jqXHR){
            // Callback code
        }
    });
    });

Sie benötigen keine Plug-Ins, Flash- oder Iframe-Kenntnisse, um dies effektiv zu erreichen. Hier sind einige Tricks, damit dieser Code wie erwartet funktioniert:

Wenn wir eine Instanz von FormData erstellen, übergeben wir form[0] anstelle von form. Damit sind tatsächliche Formularelemente gemeint, aber keine jQuery-Selektoren.

Wir übergeben einfach false, anstatt contentType zu definieren. Das bedeutet, dass jQuery den Content-Type-Header nicht zur Anfrage hinzufügt.

Wir setzen „processData“ auf „false“, sodass jQuery unseren Datenwert (basierend auf FormData) nicht in einen String umwandelt.

Das obige ist der detaillierte Inhalt vonBeispiel für das Hochladen von Dateien mit jQuery HTML5 und FormData. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!