Tutorial zum aktualisierungsfreien Datei-Upload mit PHP und HTML5 FormData

In diesem Artikel wird hauptsächlich das Tutorial zur Verwendung von PHP und HTML5 FormData zum Implementieren des aktualisierungsfreien Datei-Uploads vorgestellt. In diesem Artikel werden zunächst die Schritte zum Schreiben des Programms erläutert und schließlich ein vollständiges Beispiel aufgeführt

Das Hochladen von Dateien ohne Aktualisierung ist ein häufiges und etwas kompliziertes Problem. Eine häufige Lösung besteht darin, einen Iframe zu erstellen.

In HTML5 wird eine FormData-Objekt-API bereitgestellt. Über FormData kann eine Formularanforderung bequem erstellt und über XMLHttpRequest gesendet werden. Es ist auch möglich, Dateien über das FormData-Objekt zu senden, sodass das Hochladen ohne Aktualisierung sehr einfach wird.

Wie nutzt man FormData? Script House wird dazu im Folgenden eine kurze Einführung geben.

1. Erstellen Sie ein FormData-Objekt

Um ein FormData-Objekt zu erhalten, ist es ganz einfach:

?

1

var fd = new FormData();

1

Das FormData-Objekt bietet nur eine Append-Methode, die zum Hinzufügen von Formularanforderungsparametern zum Objekt verwendet wird.
In aktuellen Mainstream-Browsern können FormData auf die folgenden zwei Arten abgerufen oder geändert werden.
Methode 1: Erstellen Sie ein leeres FormData-Objekt und verwenden Sie dann die Append-Methode, um Schlüssel-Wert-Paare nacheinander hinzuzufügen. Beispiel:

?

1

2

3

4

varfd = newFormData();

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

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

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

Diese Methode erfordert nicht die Existenz von HTML-Formularobjekten.
Methode 2: Erhalten Sie das Formularelementobjekt und übergeben Sie es als Parameter an das FormData-Objekt. Beispiel:

?

1

2

varformobj = document.getElementById("form");

varfd = newFormData(formobj);

Natürlich können Sie auch die Append-Methode verwenden, um weitere Parameter zu fd hinzuzufügen.

2. FormData sendet eine Anfrage

Nachdem ich nun das FormData-Objekt erhalten habe, wie sende ich eine Anfrage? Das FormData-Objekt wird hauptsächlich in der Sendemethode des erweiterten XMLHttpRequest-Objekts verwendet. Siehe folgendes Beispiel:

?

1

2

3

4

5

6

7

8

varxhr = newXMLHttpRequest();   

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

xhr.send(fd);

xhr.onload = function(e) {

  if(this.status == 200) {

    alert(this.responseText);

  }

};

3. Verwendung von FormData in jQuery

In der Ajax-Methode von jQuery können Sie auch die FormData-Methode verwenden, um einen aktualisierungsfreien Upload zu erreichen. Achten Sie jedoch auf die Parametereinstellungen, siehe Folgendes:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

$.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);

});

4. Ein vollständiges Beispiel (einschließlich PHP-Verarbeitungsbeispiel):

?

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

36

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'