PHP 및 HTML5 FormData를 사용한 새로 고침 없는 파일 업로드 튜토리얼

이 글에서는 주로 PHP와 HTML5 FormData를 사용하여 새로 고침 없는 파일 업로드를 구현하는 방법을 소개하고, 마지막으로 프로그램 작성 단계를 자세히 설명하고 마지막으로 필요한 친구가 참조할 수 있도록 합니다.

새로 고침 없이 파일을 업로드하는 것은 일반적이고 다소 복잡한 문제입니다. 일반적인 해결책은 iframe을 구성하는 것입니다.

HTML5에서는 FormData 객체 API를 제공하므로 FormData를 통해 XMLHttpRequest를 통해 편리하게 양식 요청을 구성하고 보낼 수 있습니다. FormData 개체를 통해 파일을 보내는 것도 가능하므로 새로 고침 없이 업로드하는 것이 매우 간단해집니다.

그럼 FormData는 어떻게 사용하나요? 이에 대해 스크립트하우스에서는 아래에서 간략하게 소개하겠습니다.

1. FormData 개체 구성

FormData 개체를 가져오는 방법은 매우 간단합니다.

?

1

var fd = new FormData();

1

FormData 개체는 양식 요청 매개변수를 개체에 추가하는 데 사용되는 추가 메서드 하나만 제공합니다.
현재 주류 브라우저에서는 다음 두 가지 방법으로 FormData를 얻거나 수정할 수 있습니다.
방법 1: 빈 FormData 객체를 생성한 후 추가 메소드를 사용하여 키-값 쌍을 하나씩 추가합니다. 예:

?

1

2

3

4

varfd = newFormData();

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

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

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

이 방법에는 HTML 양식 개체가 필요하지 않습니다.
방법 2: 양식 요소 개체를 가져와 FormData 개체에 매개변수로 전달합니다. 예:

?

1

2

varformobj = document.getElementById("form");

varfd = newFormData(formobj);

물론, fd에 다른 매개변수를 계속 추가하기 위해 Append 메소드를 사용할 수도 있습니다.

2. FormData가 요청을 보냅니다.

이제 FormData 객체를 얻었으니 요청을 어떻게 보내나요? FormData 개체는 향상된 XMLHttpRequest 개체의 전송 메서드에 주로 사용됩니다. 다음 예를 참조하세요.

?

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. jquery에서 FormData 사용

jQuery의 ajax 메서드에서는 FormData 메서드를 사용하여 새로 고침 없이 업로드할 수도 있습니다. 단, 매개변수 설정에 주의하세요. 다음을 참조하세요.

?

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. 전체 예(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

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'