Aktualisierungsfreier Datei-Upload mit PHP und HTML5 FormData-H5-Tutorial-php.cn

Aktualisierungsfreier Datei-Upload mit PHP und HTML5 FormData

不言

Freigeben： 2018-06-28 15:15:15

Original

1310 Leute haben es durchsucht

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

Keine Das Hochladen von Dateien ist ein häufiges und etwas kompliziertes Problem. Eine gängige Lösung ist die Erstellung eines Iframes.

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. Konstruieren Sie das FormData-Objekt

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

var fd = new FormData();

Nach dem Login kopieren

Das FormData-Objekt bietet nur eine Methode, append, 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:

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

Nach dem Login kopieren

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:

var formobj = document.getElementById("form");
var fd = new FormData(formobj);

Nach dem Login kopieren

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

2. FormData sendet eine Anfrage

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

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

Nach dem Login kopieren

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. Beachten Sie jedoch die Parametereinstellungen, siehe Folgendes:

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

Nach dem Login kopieren

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

<?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>

Nach dem Login kopieren

Ich hoffe, dass es für das Studium aller hilfreich sein wird . Für weitere verwandte Inhalte folgen Sie bitte der chinesischen PHP-Website!

Verwandte Empfehlungen:

HTML5 verwendet DOM für die benutzerdefinierte Steuerung

HTML5- und CSS3-Code zur Implementierung der 3D-Anzeige von Produktinformationen

Das obige ist der detaillierte Inhalt vonAktualisierungsfreier Datei-Upload mit PHP und HTML5 FormData. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!