本文旨在解決在使用 Ajax 和 FormData 進(jìn)行文件上傳時(shí)，遇到的 $_POST 和 $_FILES 為空的問題。通過詳細(xì)的代碼示例和解釋，我們將展示如何正確地構(gòu)建 FormData 對象，并通過 Ajax 將文件和文本數(shù)據(jù)發(fā)送到服務(wù)器端，同時(shí)避免常見的錯誤配置，確保數(shù)據(jù)能夠成功地被 PHP 腳本接收和處理。

在使用 Ajax 進(jìn)行文件上傳時(shí)，F(xiàn)ormData 對象是一個(gè)強(qiáng)大的工具，它允許我們模擬 HTML 表單提交，并包含文件和其他表單數(shù)據(jù)。然而，如果配置不正確，可能會導(dǎo)致服務(wù)器端無法接收到數(shù)據(jù)，表現(xiàn)為 $_POST 和 $_FILES 為空。本文將詳細(xì)介紹如何正確地使用 FormData 對象，并通過 Ajax 將文件和文本數(shù)據(jù)上傳到服務(wù)器。

HTML 表單結(jié)構(gòu)

首先，我們需要一個(gè) HTML 表單，用于收集用戶輸入的文件和文本數(shù)據(jù)。關(guān)鍵在于正確設(shè)置 enctype 屬性為 "multipart/form-data"，這是文件上傳的必要條件。

<form name="usrupload" method="POST" enctype="multipart/form-data">
  <label class="form-label text-start">Enter your Name
    <input class="form-control" name="name" type="text" placeholder="John" />
  </label>

  <label class="form-label">Title
    <input class="form-control" type="text" name="title" placeholder="Operator" />
  </label>

  <label class="form-label">Your Cute Photo (format: jpg and png only, less than 500kb)
    <input class="form-control"  name="file" type="file" />
  </label>

  <input type='button' name='bttn' value='Submit' />
</form>

注意事項(xiàng)：

• 確保每個(gè) input 元素都有唯一的 name 屬性，這對于服務(wù)器端區(qū)分不同的輸入字段至關(guān)重要。
• 使用 zuojiankuohaophpcnlabel> 標(biāo)簽將文本描述與輸入框關(guān)聯(lián)，提高用戶體驗(yàn)和可訪問性。

JavaScript (jQuery) 代碼

接下來，我們使用 JavaScript 和 jQuery 來處理表單提交和 Ajax 請求。

碼上飛

碼上飛（CodeFlying） 是一款A(yù)I自動化開發(fā)平臺，通過自然語言描述即可自動生成完整應(yīng)用程序。

138

查看詳情

const form = document.forms.usrupload;

form.bttn.onclick = () => {
  var form_data = new FormData(form);
  $.ajax({
    type: 'POST',
    dataType: 'text',
    cache: false,
    contentType: false,
    processData: false,
    url: 'save_data.php',
    data: form_data,
    success: function(data) {
      alert(data)
      window.location = 'account.php';
    }
  });
}

關(guān)鍵點(diǎn)解釋：

1. FormData(form): 直接將表單元素作為參數(shù)傳遞給 FormData 構(gòu)造函數(shù)。這會自動收集表單中的所有字段和文件數(shù)據(jù)。
2. contentType: false 和 processData: false: 這兩個(gè)選項(xiàng)對于文件上傳至關(guān)重要。contentType: false 告訴 jQuery 不要設(shè)置 Content-Type header，讓瀏覽器根據(jù) FormData 的內(nèi)容自動設(shè)置。processData: false 告訴 jQuery 不要將 data 轉(zhuǎn)換為字符串。
3. data: form_data: 直接將 FormData 對象作為 data 選項(xiàng)的值傳遞給 Ajax 請求。

PHP 服務(wù)器端代碼

最后，我們需要 PHP 代碼來接收和處理上傳的文件和文本數(shù)據(jù)。

<?php

$name = $_POST['name'];
$title = $_POST['title'];
$file = $_FILES['file'];

// 處理文件上傳
$filename = $file['name'];
$tmp_name = $file['tmp_name'];
$error = $file['error'];

if ($error === UPLOAD_ERR_OK) {
  // 移動文件到指定目錄
  $destination = 'uploads/' . $filename;
  move_uploaded_file($tmp_name, $destination);

  echo "File uploaded successfully!";
} else {
  echo "File upload failed with error code: " . $error;
}

// 其他處理邏輯，例如將數(shù)據(jù)保存到數(shù)據(jù)庫

?>

要點(diǎn)說明：

• 使用 $_POST 數(shù)組訪問文本數(shù)據(jù)，例如 $_POST['name'] 和 $_POST['title']。
• 使用 $_FILES 數(shù)組訪問上傳的文件信息，例如 $_FILES['file']['name']（文件名）和 $_FILES['file']['tmp_name']（臨時(shí)文件路徑）。
• 務(wù)必檢查 $_FILES['file']['error'] 的值，以確保文件上傳成功。
• 使用 move_uploaded_file() 函數(shù)將臨時(shí)文件移動到指定目錄。

常見問題和解決方案

• $_POST 和 $_FILES 為空： 檢查 HTML 表單的 enctype 屬性是否設(shè)置為 "multipart/form-data"，并確保 Ajax 請求的 contentType 和 processData 選項(xiàng)設(shè)置為 false。
• 文件上傳失敗： 檢查 $_FILES['file']['error'] 的值，并根據(jù)錯誤代碼進(jìn)行排查。常見的錯誤包括文件大小超過限制、文件類型不符合要求等。
• JavaScript 錯誤： 確保 jQuery 庫已正確加載，并且 JavaScript 代碼沒有語法錯誤。

總結(jié)

通過本文的教程，您應(yīng)該能夠正確地使用 Ajax 和 FormData 對象進(jìn)行文件上傳，并成功地在服務(wù)器端接收和處理數(shù)據(jù)。關(guān)鍵在于正確配置 HTML 表單、JavaScript 代碼和 PHP 服務(wù)器端代碼，并注意避免常見的錯誤。記住，F(xiàn)ormData 對象是一個(gè)強(qiáng)大的工具，可以簡化文件上傳的流程，提高用戶體驗(yàn)。

以上就是使用 Ajax 和 FormData 實(shí)現(xiàn)文件上傳及文本數(shù)據(jù)提交的完整教程的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！