Mehrere Methoden zum asynchronen Datei-Upload mit Ajax

Der Kern von Ajax ist das JavaScript-Objekt XmlHttpRequest. Dieses Objekt wurde erstmals in Internet Explorer 5 eingeführt und ist eine Technologie, die asynchrone Anforderungen unterstützt. Kurz gesagt, XmlHttpRequest ermöglicht Ihnen die Verwendung von JavaScript, um Anfragen an den Server zu stellen und die Antworten zu verarbeiten, ohne den Benutzer zu blockieren. Ajax stellt nur wenige Serveranforderungen und kann Java EE-Anwendungen, .NET-Anwendungen und andere Arten von Anwendungen bedienen. Mit Ajax können Sie JavaScript-Code schreiben, um HTML zu verbessern und ein reichhaltiges interaktives Benutzererlebnis zu schaffen.

1. Lernen Sie das FormData-Objekt kennen

FormData ist eine neue Klasse, die zu Html5 hinzugefügt wurde und Formulardaten simulieren kann

Konstruktor

Erläuterung

FormData (optionales HTMLFormElement-Formular) (optional) Ein HTML-Formularelement, das jede Form von Formularsteuerelementen enthalten kann, einschließlich Dateieingabefeldern

Methode

void append( DOMString-Name, DOMString-Wert)

Name des Formularelements

Wert, der vom Formularelement übergeben werden soll

<form name="myForm"  enctype="multipart/form-data">
    <input type="text" name="userName">
    <input type="file" name="img">
    <input type="button" id="btn" value="submit">
</form>

2. Einfache Implementierung mit Javascript

function upload() {    var userName = document.myForm.userName.value;    var img = document.myForm.img.files[0];    var fm = new FormData();
    fm.append('userName', userName);
    fm.append('img', img);    var request = new XMLHttpRequest();
    request.open('POST', 'submitform.php');
    request.send(fm);
}

3. Verwenden Sie Ajax zur Implementierung

$('#btn').click(function () {    var userName = document.myForm.userName.value;    var img = document.myForm.img.files[0];    var fm = new FormData();
    fm.append('userName', userName);
    fm.append('img', img);
    $.ajax(
        {
            url: 'submitform.php',
            type: 'POST',
            data: fm,
            contentType: false, //禁止设置请求类型
            processData: false, //禁止jquery对DAta数据的处理,默认会处理
            //禁止的原因是,FormData已经帮我们做了处理
            success: function (result) {                //测试是否成功
                //但需要你后端有返回值
                alert(result);
            }
        }
    );
});

4. Das Plugin ajaxfileupload.js implementiert den Ajax-Datei-Upload

function upload(){
$.ajaxFileUpload({
        url: 'a.php', //用于文件上传的服务器端请求地址
        secureuri: false, //一般设置为false
        fileElementId: 'file', //文件上传空间的id属性  
        dataType: 'HTML', //返回值类型 一般设置为json
        success: function (data, status)  //服务器成功响应处理函数        {                
            $("#img1").attr("src", data);
            addI(data);
        },
        error: function (data, status, e)//服务器响应失败处理函数        {
            alert(e);
        }
    }   
);
}

Für PHP können Sie die Dateien verwenden globales Array zum Abrufen der Dateiattribute, POST global Das Array erhält den Wert von userName

Die oben genannten sind die verschiedenen Methoden von Ajax, um den asynchronen Datei-Upload einfach zu implementieren.

Verwandte Empfehlungen:

Ajax-Echtzeit-Aktualisierungsverarbeitungsmethode

Mehrere Javascript-Methoden zur Implementierung von nativem Ajax

Eine kurze Einführung in Ajax

Das obige ist der detaillierte Inhalt vonMehrere Methoden zum asynchronen Datei-Upload mit Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!