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