Home > Article > Web Front-end > Refresh-free file upload using PHP and HTML5 FormData

Refresh-free file upload using PHP and HTML5 FormData

不言Original: 2018-06-28 15:15:151246browse

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 who need it can refer to it

无Refreshing file upload is a common and 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 conveniently 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:

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:

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

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

var formobj = document.getElementById("form");
var fd = new FormData(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:

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);
  }
};

3. Using FormData in jquery

In the ajax method of jQuery , you can also use the FormData method to achieve refresh-free upload. But pay attention to the parameter settings, refer to the following:

$.ajax({
  url: "http://jb51.net",
  type: &#39;POST&#39;,
  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. A complete example (including PHP processing example):

<?php
//php 接收表单提交信息并打印
if( isset( $_REQUEST[&#39;do&#39;]) ){
  var_dump($_REQUEST);
  var_dump($_FILES);
  die();
}

?>
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>FormData Test - jb51.net</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  </head>
  <body>
    <form id="form">
      <input type="file" name="file" id="file" />
      <input type="text" name="name" id="" value="脚本之家" />
      <input type="text" name="blog" id="" value="http://jb51.net" />
      <input type="submit" name="do" id="do" value="submit" />
    </form>
    <script>
    $("form").submit(function(e){
      e.preventDefault();
      
      //空对象然后添加
      var fd = new FormData();
      fd.append("name", "脚本之家");
      fd.append("blog", "http://jb51.net");
      fd.append("file", document.getElementById("file"));
      //fd.append("file", $(":file")[0].files[0]); //jQuery 方式
      fd.append("do", "submit");
      
      //通过表单对象创建 FormData
      var fd = new FormData(document.getElementById("form"));
      //var fd = new FormData($("form:eq(0)")[0]); //jquery 方式
      
      //XMLHttpRequest 原生方式发送请求
      var xhr = new XMLHttpRequest();    
      xhr.open("POST" ,"" , true);
      xhr.send(fd);
      xhr.onload = function(e) {
        if (this.status == 200) {
          alert(this.responseText);
        };
      };
      return;
      //jQuery 方式发送请求
      $.ajax({
        type:"post",
        //url:"",
        data: fd,
        processData: false,
        contentType: false
      }).done(function(res){
        console.log(res);
      });
      
      return false;
    });
    </script>
  </body>
</html>

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please Follow PHP Chinese website!

Related recommendations:

HTML5 uses DOM for custom control

HTML5 and CSS3 code to implement 3D display of product information

The above is the detailed content of Refresh-free file upload using PHP and HTML5 FormData. For more information, please follow other related articles on the PHP Chinese website!

php html5 jquery ajax css3 html append 对象 dom

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML5 and CSS3 code to implement 3D display of product informationNext article：HTML5 and CSS3 code to implement 3D display of product information

See more

Refresh-free file upload using PHP and HTML5 FormData

Related articles