Plusieurs méthodes pour le téléchargement de fichiers asynchrone avec Ajax

Le cœur d'Ajax est l'objet JavaScript XmlHttpRequest. Cet objet a été introduit pour la première fois dans Internet Explorer 5 et constitue une technologie qui prend en charge les requêtes asynchrones. En bref, XmlHttpRequest vous permet d'utiliser JavaScript pour envoyer des requêtes au serveur et gérer les réponses sans bloquer l'utilisateur. Ajax a peu de configuration requise en matière de serveur et peut servir des applications Java EE, des applications .NET et d'autres types d'applications. Grâce à Ajax, vous pouvez écrire du code JavaScript pour améliorer le HTML et créer une riche expérience utilisateur interactive.

1. Apprenez à connaître l'objet FormData

FormData est une nouvelle classe ajoutée à Html5, qui peut simuler les données de formulaire

Constructor

Explication

FormData (formulaire HTMLFormElement facultatif) (facultatif) Un élément de formulaire HTML qui peut contenir toute forme de contrôles de formulaire, y compris les zones de saisie de fichier

Méthode

void append(. Nom DOMString, valeur DOMString)

nom nom de l'élément de formulaire

valeur valeur à transmettre par l'élément de formulaire

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

Implémentation simple utilisant 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. Utilisez Ajax pour implémenter

$('#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. Le plug-in ajaxfileupload.js implémente le téléchargement de fichiers Ajax

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);
        }
    }   
);
}

Pour PHP, vous pouvez utiliser les fichiers. tableau global pour obtenir les attributs du fichier, POST global Le tableau obtient la valeur de userName

Ci-dessus sont les différentes méthodes d'Ajax pour implémenter simplement le téléchargement de fichiers asynchrone. J'espère que cela sera utile à tout le monde.

Recommandations associées :

Méthode de traitement de rafraîchissement en temps réel Ajax

Plusieurs méthodes javascript pour implémenter l'ajax natif

Une brève introduction à ajax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!