PHP および HTML5 FormData を使用した、更新不要のファイルのアップロード

この記事では主に、PHP と HTML5 FormData を使用して更新不要のファイル アップロードを実装するチュートリアルを紹介します。この記事では、最初にプログラムの作成手順を詳しく説明し、最後に必要な方は参照できるように完全な例を示します。更新せずにアップロードするのが一般的です。 このやや複雑な問題に対する一般的な解決策は、iframe を構築することです。

HTML5 では、FormData オブジェクト API が提供されており、FormData を通じてフォーム リクエストを簡単に構築し、XMLHttpRequest を通じて送信できます。 FormData オブジェクトを通じてファイルを送信することもできるため、更新せずにアップロードすることが非常に簡単になります。

では、FormData を使用するにはどうすればよいでしょうか? Script House はこれについて以下に簡単に紹介します。

FormData オブジェクトを取得するのは非常に簡単です:

var fd = new FormData();

FormData オブジェクトは、フォーム リクエスト パラメーターを物体。

方法 1: 空の FormData オブジェクトを作成し、append メソッドを使用してキーと値のペアを 1 つずつ追加します。例:

var fd = new FormData();
fd.append("name", "脚本之家");
fd.append("blog", "http://jb51.net");
fd.append("file", document.getElementById("file"));

このメソッドは、HTML フォーム オブジェクトの存在を必要としません。

var formobj = document.getElementById("form");
var fd = new FormData(formobj);

もちろん、append メソッドを使用して他のパラメータを fd に追加し続けることもできます。

FormData オブジェクトを用意したので、どのようにリクエストを送信すればよいでしょうか? FormData オブジェクトは主に、拡張された XMLHttpRequest オブジェクトの send メソッドで使用されます。次の例を参照してください:

var xhr = new XMLHttpRequest();    
xhr.open("POST" ,"http://jb51.net" , true);
xhr.send(fd);
xhr.onload = function(e) {
  if (this.status == 200) {
    alert(this.responseText);
  }
};

jQuery の ajax メソッドでは、FormData メソッドを使用して更新なしのアップロードを実現することもできます。ただし、パラメータ設定に注意してください。以下を参照してください:

$.ajax({
  url: "http://jb51.net",
  type: 'POST',
  data: fd,
  /**
   *必须false才会自动加上正确的Content-Type
   */
  contentType:false,
  /**
   * 必须false才会避开jQuery对 formdata 的默认处理
   * XMLHttpRequest会对 formdata 进行正确的处理
   */
  processData:false
}).done(function(result){
  console.log(result);
}).fail(function(err){
  console.log(err);
});

上記は全体です。この記事の内容が皆さんの学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

以上がPHP および HTML5 FormData を使用した、更新不要のファイルのアップロードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。