Refresh-free file upload tutorial using PHP and HTML5 FormData

This article mainly introduces the tutorial of using PHP and HTML5 FormData to implement refresh-free file upload. This article first breaks down the steps of writing the program, and finally gives a complete example. Friends in need can refer to it

No-refresh file upload is a A common but somewhat complicated problem, a common solution is to construct an iframe.

In HTML5, a FormData object API is provided. Through FormData, a form request can be easily constructed and sent through XMLHttpRequest. It is also possible to send files through the FormData object, so uploading without refreshing becomes very simple.

So how to use FormData? Script House will give a brief introduction to this below.

1. Construct a FormData object

If you want to get a FormData object, it is very simple:

?

1

var fd = new FormData();

The FormData object only provides one method append, which is used to add form request parameters to the object.
In current mainstream browsers, FormData can be obtained or modified in the following two ways.
Method 1: Create an empty FormData object, and then use the append method to add key-value pairs one by one. Example:

?

1

2

3

4

varfd = newFormData();

fd.append("name", "Script House");

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

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

This method does not require the existence of HTML form objects.
Method 2: Obtain the form element object and pass it into the FormData object as a parameter. Example:

?

1

2

varformobj = document.getElementById( "form");

varfd = newFormData(formobj);

Of course, you can also use the append method to continue adding other parameters to fd.

2. FormData sends a request

Now that I have obtained the FormData object, how do I send a request? The FormData object is mainly used in the send method of the enhanced XMLHttpRequest object. Refer to the following example:

?

1

2

3

4

5

6

7

8

var xhr = newXMLHttpRequest();

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

xhr.send(fd);

xhr.onload = function(e) {

  if(this.status == 200) {

    alert(this.responseText);

  }

};

3. Using FormData in jquery

In the ajax method of jQuery, you can also use the FormData method to achieve refresh-free upload. But please pay attention to the parameter settings, the reference is as follows:

?

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,

  /**

* must be false to automatically add the correct Content-Type

*/

contentType:false,

  /**

* It must be false to avoid jQuery's default processing of formdata

* XMLHttpRequest will handle formdata correctly

*/

  processData:false

}).done(function(result){

  console.log(result);

}).fail(function(err){

  console.log(err);

});

4. A complete example (including PHP processing example):

?

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 Receive form submission information and print

if( isset( $_REQUEST['do'