国产精品成人久久电影,天堂最新版在线

使用 Ajax 和 FormData 實現(xiàn)文件上傳及文本數(shù)據(jù)提交

DDD

發(fā)布： 2025-10-16 13:13:01

原創(chuàng)

130人瀏覽過

使用 ajax 和 formdata 實現(xiàn)文件上傳及文本數(shù)據(jù)提交

本文檔旨在解決在使用 Ajax 和 FormData 進行文件上傳時，同時提交文本輸入數(shù)據(jù)遇到的常見問題，例如 PHP 端無法獲取 `$_POST` 和 `$_FILES` 數(shù)據(jù)。我們將詳細介紹如何正確配置 HTML 表單、JavaScript 代碼以及 PHP 后端，以實現(xiàn)完整的文件和文本數(shù)據(jù)上傳功能。

HTML 表單配置

首先，確保你的 HTML 表單正確設(shè)置了 enctype 屬性，并且 name 屬性在表單中是唯一的。enctype="multipart/form-data" 是文件上傳的關(guān)鍵。

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

登錄后復制

注意事項：

確保每個 input 元素都有唯一的 name 屬性。
label 元素應(yīng)該通過 for 屬性或直接包裹 input 元素來關(guān)聯(lián)。

JavaScript (jQuery) 代碼

使用 JavaScript (jQuery) 創(chuàng)建 FormData 對象，并將表單數(shù)據(jù)添加到其中。然后，使用 Ajax 發(fā)送 FormData 對象。

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)鍵點：

contentType: false 和 processData: false 是必須的，因為 FormData 對象會自動處理 Content-Type。
直接將 form_data 對象作為 data 屬性的值傳遞給 Ajax 請求。
使用 new FormData(form) 可以直接將整個表單的數(shù)據(jù)添加到 FormData 對象中。

PHP 后端代碼

在 PHP 后端，可以使用 $_POST 和 $_FILES 超全局變量來訪問上傳的數(shù)據(jù)。

騰訊智影-AI數(shù)字人

基于AI數(shù)字人能力，實現(xiàn)7*24小時AI數(shù)字人直播帶貨，低成本實現(xiàn)直播業(yè)務(wù)快速增增，全天智能在線直播

查看詳情

<?php

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

// 其他處理文件和數(shù)據(jù)的代碼
?>

登錄后復制

注意事項：

確保在訪問 $_FILES 之前，檢查文件是否成功上傳。
進行適當?shù)奈募愋秃痛笮◎炞C，以確保安全性。
使用 move_uploaded_file() 函數(shù)將上傳的文件移動到服務(wù)器上的安全位置。

完整示例

HTML:

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
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';
    }
  });
}
</script>

登錄后復制

PHP (save_data.php):

<?php

if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $name = $_POST['name'];
    $title = $_POST['title'];

    if (isset($_FILES['file']) && $_FILES['file']['error'] == 0) {
        $file = $_FILES['file'];
        $filename = $file['name'];
        $filetmpname = $file['tmp_name'];
        $filesize = $file['size'];
        $filetype = $file['type'];

        // 移動上傳的文件到指定目錄
        $upload_dir = "uploads/"; // 確保該目錄存在且可寫
        $filepath = $upload_dir . $filename;

        if (move_uploaded_file($filetmpname, $filepath)) {
            echo "File uploaded successfully!";
        } else {
            echo "Error uploading file.";
        }
    } else {
        echo "No file uploaded or error during upload.";
    }

    echo "Name: " . $name . "<br>";
    echo "Title: " . $title . "<br>";
} else {
    echo "Invalid request method.";
}

?>

登錄后復制

總結(jié)：

通過正確配置 HTML 表單的 enctype 屬性，使用 JavaScript 創(chuàng)建 FormData 對象，并設(shè)置 Ajax 請求的 contentType 和 processData 屬性為 false，可以成功地將文件和文本數(shù)據(jù)一起上傳到服務(wù)器。在 PHP 后端，可以使用 $_POST 和 $_FILES 超全局變量來訪問上傳的數(shù)據(jù)。記住進行適當?shù)尿炞C和錯誤處理，以確保應(yīng)用程序的安全性。

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

相關(guān)標簽：