Ajax を使用した非同期ファイルアップロードのための複数の方法

Ajax のコアは JavaScript オブジェクト XmlHttpRequest です。このオブジェクトは Internet Explorer 5 で初めて導入され、非同期要求をサポートするテクノロジです。つまり、XmlHttpRequest を使用すると、JavaScript を使用してサーバーにリクエストを送信し、ユーザーをブロックすることなく応答を処理できるようになります。 Ajax にはサーバー要件がほとんどなく、Java EE アプリケーション、.NET アプリケーション、およびその他の種類のアプリケーションを提供できます。 Ajax を使用すると、JavaScript コードを記述して HTML を改善し、豊かなインタラクティブなユーザー エクスペリエンスを作成できます。

1. FormData オブジェクトについて理解する

FormData は、フォーム データをシミュレートできる、Html5 に追加された新しいクラスです

Constructor

説明

FormData (オプションの HTMLFormElement フォーム) (オプション) contains ファイル入力ボックスを含む、任意の形式のフォーム コントロール。 javascript を使用した実装

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

3. Ajax を使用して実装

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

4. ajaxfileupload.js プラグインは、Ajax ファイルのアップロードを実装します

$('#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);
            }
        }
    );
});

PHP の場合、Files グローバル配列を使用してファイル属性と POST を取得できます。 userName の値を取得するためのグローバル配列

上記は Ajax の単純さです。非同期ファイルのアップロードを実装する方法はたくさんあります。皆さんの参考になれば幸いです。

関連する推奨事項:

ajax リアルタイム更新処理を実装する方法

ネイティブ ajax を実装するためのいくつかの JavaScript メソッド

ajax の簡単な紹介

以上がAjax を使用した非同期ファイルアップロードのための複数の方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。