使用PHP和HTML5 FormData实现无刷新文件上传教程，

Heim

Backend-Entwicklung

PHP-Tutorial

使用PHP和HTML5 FormData实现无刷新文件上传教程，_PHP教程

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jul 13, 2016 am 10:19 AM

formdatahtml5php文件上传Keine Aktualisierung

使用PHP和HTML5 FormData实现无刷新文件上传教程，

无刷新文件上传是一个常见而又有点复杂的问题，常见的解决方案是构造 iframe 方式实现。

在 HTML5 中提供了一个 FormData 对象 API，通过 FormData 可以方便地构造一个表单请求，并通过 XMLHttpRequest 来发送。通过 FormData 对象发送文件也是可以的，如此则无刷新上传就变的非常简单了。

那么 FormData 怎么使用呢？下面帮客之家对此进行简单的介绍。

1. 构造 FormData 对象

想得到一个FormData对象，很简单：

var fd = new FormData();

FormData 对象只提供了一个方法 append ，用于向对象中添加表单请求参数。
在当前主流浏览器中，可通过如下两种方式获取或修改FormData。
方法一：创建一个空的FormData对象，然后再用append方法逐个添加键值对。示例：

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

这种方法可以不需要 HTML 的表单对象存在。
方法二：取得form元素对象，将它作为参数传入FormData对象中。示例：

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

当然，这里还可以使用 append 方法继续向 fd 中添加其他参数。

2. FormData 发送请求

得到 FormData 对象了，如何发送请求呢？ FormData 对象主要用于增强型的 XMLHttpRequest 对象的 send 方法中。参考如下示例：

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. jquery 中使用 FormData

在 jQuery 的 ajax 方法中，也可使用 FormData 方式实现无刷新上传。但要注意参数的设置，参考如下：

$.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处理示例）：

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

&#63;>
<!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>

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

Verwandter Artikel

PHP: Eine Einführung in die serverseitige SkriptspracheApr 16, 2025 am 12:18 AM

PHP ist eine serverseitige Skriptsprache, die für dynamische Webentwicklung und serverseitige Anwendungen verwendet wird. 1.PHP ist eine interpretierte Sprache, die keine Zusammenstellung erfordert und für die schnelle Entwicklung geeignet ist. 2. PHP -Code ist in HTML eingebettet, wodurch es einfach ist, Webseiten zu entwickeln. 3. PHP verarbeitet die serverseitige Logik, generiert die HTML-Ausgabe und unterstützt Benutzerinteraktion und Datenverarbeitung. 4. PHP kann mit der Datenbank interagieren, die Einreichung von Prozessformularen und serverseitige Aufgaben ausführen.

PHP und das Web: Erforschen der langfristigen AuswirkungenApr 16, 2025 am 12:17 AM

PHP hat das Netzwerk in den letzten Jahrzehnten geprägt und wird weiterhin eine wichtige Rolle bei der Webentwicklung spielen. 1) PHP stammt aus dem Jahr 1994 und ist aufgrund seiner Benutzerfreundlichkeit und der nahtlosen Integration in MySQL die erste Wahl für Entwickler. 2) Zu den Kernfunktionen gehört das Generieren dynamischer Inhalte und die Integration in die Datenbank, sodass die Website in Echtzeit aktualisiert und auf personalisierte Weise angezeigt wird. 3) Die breite Anwendung und das Ökosystem von PHP hat seine langfristigen Auswirkungen angetrieben, steht jedoch auch mit Versionsaktualisierungen und Sicherheitsherausforderungen gegenüber. 4) Leistungsverbesserungen in den letzten Jahren, wie die Veröffentlichung von PHP7, ermöglichen es ihm, mit modernen Sprachen zu konkurrieren. 5) In Zukunft muss PHP sich mit neuen Herausforderungen wie Containerisierung und Microservices befassen, aber seine Flexibilität und die aktive Community machen es anpassungsfähig.

Warum PHP verwenden? Vorteile und Vorteile erläutertApr 16, 2025 am 12:16 AM

Zu den Kernvorteilen von PHP gehören einfacher Lernen, starke Unterstützung für Webentwicklung, reiche Bibliotheken und Rahmenbedingungen, hohe Leistung und Skalierbarkeit, plattformübergreifende Kompatibilität und Kosteneffizienz. 1) leicht zu erlernen und zu bedienen, geeignet für Anfänger; 2) gute Integration in Webserver und unterstützt mehrere Datenbanken. 3) leistungsstarke Frameworks wie Laravel; 4) hohe Leistung kann durch Optimierung erzielt werden; 5) mehrere Betriebssysteme unterstützen; 6) Open Source, um die Entwicklungskosten zu senken.

Debunking der Mythen: Ist PHP wirklich eine tote Sprache?Apr 16, 2025 am 12:15 AM

PHP ist nicht tot. 1) Die PHP -Community löst aktiv Leistungs- und Sicherheitsprobleme, und Php7.x verbessert die Leistung. 2) PHP ist für die moderne Webentwicklung geeignet und wird in großen Websites häufig verwendet. 3) PHP ist leicht zu erlernen und der Server funktioniert gut, aber das Typsystem ist nicht so streng wie statische Sprachen. 4) PHP ist in den Bereichen Content-Management und E-Commerce immer noch wichtig, und das Ökosystem entwickelt sich weiter. 5) Optimieren Sie die Leistung über Opcache und APC und verwenden Sie OOP- und Designmuster, um die Codequalität zu verbessern.

Die PHP vs. Python -Debatte: Was ist besser?Apr 16, 2025 am 12:03 AM

PHP und Python haben ihre eigenen Vor- und Nachteile, und die Wahl hängt von den Projektanforderungen ab. 1) PHP eignet sich für Webentwicklung, leicht zu lernen, reichhaltige Community -Ressourcen, aber die Syntax ist nicht modern genug, und Leistung und Sicherheit müssen beachtet werden. 2) Python eignet sich für Datenwissenschaft und maschinelles Lernen mit prägnanter Syntax und leicht zu erlernen. Es gibt jedoch Engpässe bei der Ausführungsgeschwindigkeit und des Speichermanagements.

Zweck von PHP: Erstellen dynamischer WebsitesApr 15, 2025 am 12:18 AM

PHP wird verwendet, um dynamische Websites zu erstellen. Zu den Kernfunktionen gehören: 1. Dynamische Inhalte generieren und Webseiten in Echtzeit generieren, indem Sie eine Verbindung mit der Datenbank herstellen; 2. Verarbeiten Sie Benutzerinteraktions- und Formulareinreichungen, überprüfen Sie Eingaben und reagieren Sie auf Operationen. 3. Verwalten Sie Sitzungen und Benutzerauthentifizierung, um eine personalisierte Erfahrung zu bieten. 4. Optimieren Sie die Leistung und befolgen Sie die Best Practices, um die Effizienz und Sicherheit der Website zu verbessern.

PHP: Datenbanken und serverseitige Logik bearbeitenApr 15, 2025 am 12:15 AM

PHP verwendet MySQLI- und PDO-Erweiterungen, um in Datenbankvorgängen und serverseitiger Logikverarbeitung zu interagieren und die serverseitige Logik durch Funktionen wie Sitzungsverwaltung zu verarbeiten. 1) Verwenden Sie MySQLI oder PDO, um eine Verbindung zur Datenbank herzustellen und SQL -Abfragen auszuführen. 2) Behandeln Sie HTTP -Anforderungen und Benutzerstatus über Sitzungsverwaltung und andere Funktionen. 3) Verwenden Sie Transaktionen, um die Atomizität von Datenbankvorgängen sicherzustellen. 4) Verhindern Sie die SQL -Injektion, verwenden Sie Ausnahmebehandlung und Schließen von Verbindungen zum Debuggen. 5) Optimieren Sie die Leistung durch Indexierung und Cache, schreiben Sie hochlesbarer Code und führen Sie die Fehlerbehandlung durch.

Wie verhindern Sie die SQL -Injektion in PHP? (Vorbereitete Aussagen, PDO)Apr 15, 2025 am 12:15 AM

Die Verwendung von Vorverarbeitungsanweisungen und PDO in PHP kann SQL -Injektionsangriffe effektiv verhindern. 1) Verwenden Sie PDO, um eine Verbindung zur Datenbank herzustellen und den Fehlermodus festzulegen. 2) Erstellen Sie Vorverarbeitungsanweisungen über die Vorbereitungsmethode und übergeben Sie Daten mit Platzhaltern und führen Sie Methoden aus. 3) Abfrageergebnisse verarbeiten und die Sicherheit und Leistung des Codes sicherstellen.

See all articles