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

首頁

後端開發

php教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 07, 2016 pm 05:16 PM

formdatahtml5php

无刷新文件上传是一个常见而又有点复杂的问题，常见的解决方案是构造 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://php.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://php.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://php.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 - php.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://php.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://php.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>

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

您什麼時候使用特質與PHP中的抽像類或接口？Apr 10, 2025 am 09:39 AM

在PHP中，trait適用於需要方法復用但不適合使用繼承的情況。 1)trait允許在類中復用方法，避免多重繼承複雜性。 2)使用trait時需注意方法衝突，可通過insteadof和as關鍵字解決。 3)應避免過度使用trait，保持其單一職責，以優化性能和提高代碼可維護性。

什麼是依賴性注入容器（DIC），為什麼在PHP中使用一個？Apr 10, 2025 am 09:38 AM

依賴注入容器（DIC）是一種管理和提供對象依賴關係的工具，用於PHP項目中。 DIC的主要好處包括：1.解耦，使組件獨立，代碼易維護和測試；2.靈活性，易替換或修改依賴關係；3.可測試性，方便注入mock對象進行單元測試。

與常規PHP陣列相比，解釋SPL SplfixedArray及其性能特徵。Apr 10, 2025 am 09:37 AM

SplFixedArray在PHP中是一種固定大小的數組，適用於需要高性能和低內存使用量的場景。 1)它在創建時需指定大小，避免動態調整帶來的開銷。 2)基於C語言數組，直接操作內存，訪問速度快。 3)適合大規模數據處理和內存敏感環境，但需謹慎使用，因其大小固定。

PHP如何安全地上載文件？Apr 10, 2025 am 09:37 AM

PHP通過$\_FILES變量處理文件上傳，確保安全性的方法包括：1.檢查上傳錯誤，2.驗證文件類型和大小，3.防止文件覆蓋，4.移動文件到永久存儲位置。

什麼是無效的合併操作員（??）和無效分配運算符（?? =）？Apr 10, 2025 am 09:33 AM

JavaScript中處理空值可以使用NullCoalescingOperator(??)和NullCoalescingAssignmentOperator(??=)。 1.??返回第一個非null或非undefined的操作數。 2.??=將變量賦值為右操作數的值，但前提是該變量為null或undefined。這些操作符簡化了代碼邏輯，提高了可讀性和性能。

什麼是內容安全策略（CSP）標頭，為什麼重要？Apr 09, 2025 am 12:10 AM

CSP重要因為它能防範XSS攻擊和限制資源加載，提升網站安全性。 1.CSP是HTTP響應頭的一部分，通過嚴格策略限制惡意行為。 2.基本用法是只允許從同源加載資源。 3.高級用法可設置更細粒度的策略，如允許特定域名加載腳本和样式。 4.使用Content-Security-Policy-Report-Only頭部可調試和優化CSP策略。