Heim > Artikel > Web-Frontend > Aktualisierungsfreier Datei-Upload mit PHP und HTML5 FormData

Aktualisierungsfreier Datei-Upload mit PHP und HTML5 FormData

不言Original: 2018-06-28 15:15:151283Durchsuche

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

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

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

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

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

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>

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!

php html5 jquery ajax css3 html append 对象 dom

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：HTML5- und CSS3-Code zur Implementierung der 3D-Anzeige von ProduktinformationenNächster Artikel：HTML5- und CSS3-Code zur Implementierung der 3D-Anzeige von Produktinformationen

In Verbindung stehende Artikel

Mehr sehen