PHP と HTML5 FormData を使用した、更新不要のファイル アップロード チュートリアル

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

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

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

1. FormData オブジェクトを構築する

FormData オブジェクトを取得したい場合は、非常に簡単です:

1

var fd = new FormData();

FormData オブジェクトは、フォーム リクエスト パラメーターをオブジェクトに追加するために使用される append メソッドを 1 つだけ提供します。
現在主流のブラウザでは、次の 2 つの方法で FormData を取得または変更できます。
方法 1: 空の FormData オブジェクトを作成し、append メソッドを使用してキーと値のペアを 1 つずつ追加します。例:

?

1

2

3

4

varfd = newFormData();

fd.append("name"、 "脚本之家""脚本之家");

);🎜🎜

fd.append("blog"、 "http://jb51.net""http://jb51.net");

);🎜🎜

fd.append("file"、 document.getElementById("file"));

));🎜🎜

このメソッドは、HTML フォーム オブジェクトの存在を必要としません。
方法 2: フォーム要素オブジェクトを取得し、それをパラメーターとして FormData オブジェクトに渡します。例:

?

1

2

varformobj = document.getElementById("form");

varfd = newFormData(formobj);

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

2. FormData はリクエストを送信します

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

xhr.open("POST","http://jb51.net", true);xhr.open("POST","http://jb51.net", true);

xhr.send(fd);

xhr.send(fd);🎜

xhr.onload = 関数function(e) {

  if(this if

(🎜この🎜🎜.ステータス == 200) {🎜🎜

this    alert(this.responseText);

  }

};

};🎜🎜🎜

3. jquery で FormData を使用する

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

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

$.ajax({

  $.ajax({ "http://jb51.net",

🎜🎜url: 🎜  入力: 「投稿」'POST',

  ,

  /**

データ: fd,🎜🎜🎜🎜/**🎜🎜

* 必須须偽才会自动加上正确的 Content-Type   *必须false才会自动加上正确的Content-Type

   */

  contentType:false,

*/🎜🎜 false🎜

  /**

   /**

   * 必須; false 才は jQuery の formdata の默认处処理を避ける必要があります

   */

* XMLHttpRequest会对 formdata は正しい処理を実行します🎜🎜🎜 🎜🎜*/🎜🎜

false  processData:false

}).done(function(result){

  console.log(result);

関数🎜🎜 🎜

}).fail(関数(エラー){}).fail(function(err){

  console.log(err);

});

console.log(err);});🎜🎜🎜

4. 完全な例 (PHP 処理の例を含む):

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

3 6

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

//php フォーム送信情報を受け取って印刷します

if( isset( $_REQUEST['do'🎜[🎜'do'🎜