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

小云云
リリース: 2023-03-17 16:00:01
オリジナル
1742 人が閲覧しました

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

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

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

Constructor

説明

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

ログイン後にコピー

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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!