如何使用AJAX將HTML表單POST參數傳遞給PHP？

Question

我正在嘗試在我的網站上實現文件上傳功能。

我已經創建了用於上傳的實際PHP腳本，這就是我添加到HTML中的內容：

<form enctype="multipart/form-data" action="PHPScripts/upload.php" method="POST">
    <input type="file" id="browseButton" name="image" onchange="this.form.submit();" />
</form>

這將觸發預期的upload.php，但是，這並不是我想要確切實現的。 我想改為實現AJAX。 因此，當用戶選擇文件時，我想觸發JavaScript函數，並希望該函數隨后調用upload.php。

但是有一個問題：我應該如何通過JavaScript將POST參數（即$_POST["upload"]和$_FILES["image"] ）傳遞給PHP函數？ 我知道這應該很簡單，但是我被困住了。 感謝您的澄清。

更新資料

Changelog解釋說，這是我無法想象的。 我的最終目標是實現以下目標：

1. 用戶瀏覽要上傳的圖像。
2. PHP將映像上載到服務器計算機上的指定位置。
3. （這很關鍵）成功上傳后，上傳的文件將以預定義標簽顯示。 您能否就如何實現第三步提出一些建議？ 謝謝你

Answer 1

盡管當時接受的答案可能是准確的，但自2011年初以來情況有所變化。盡管如此，盡管如此，Stackoverflow上的評論者仍堅持認為不能通過Ajax上傳文件。 這是不正確的。

通過帶有參數的Ajax上傳文件：選項1

File API與XMLHttpRequest 2級結合在一起，使您可以通過“ ajax”發送文件。 您可以使用FormData對象來執行此操作，該對象允許您在請求有效負載中包含參數以及文件。 通過XHR發送FormData對象將導致多部分編碼請求。

var xhr = new XMLHttpRequest(),
    formData = new FormData();

formData.append('file1', file1);
formData.append('file2', file2);
formData.append('param1', 'foo');
formData.append('param2', 'bar');

xhr.open('POST', '/my/endpoint', true);

xhr.send(formData);

使用FormData的明顯好處是能夠在同一請求中發送多個文件並在請求有效負載中關聯參數。 如果要發送POST或PUT請求，則無論如何，您的參數可能應該都在有效負載中。 一個小麻煩涉及Content-Length標頭值。

通過帶有參數的Ajax上傳文件：選項2

另一個更簡單的選擇是僅發送包含整個文件作為請求正文的請求：

var xhr = new XMLHttpRequest();

xhr.open('POST', '/my/endpoint?param1=foo&param2=bar', true);

xhr.send(file1);

使用這種方法，任何參數都必須作為URI的查詢字符串的一部分發送。 這可能會使服務器端有些混亂，因為通常希望在請求正文中發送POST請求的參數。 請注意，您還必須針對每個文件分別發送請求，該請求可能很重要，也可能不重要，具體取決於您的工作流程。

瀏覽器支持通過Ajax上傳文件

當前，除IE9和更早版本以外的所有瀏覽器，以及Android 2.3.x，當然還有iOS5，都對File API擁有足夠的支持，以使這一切成為可能。

對於不支持File API的瀏覽器，您將必須使用<form>來上傳文件。 您可以使用<form>作為包含包含表示您的文件和參數的<input>元素的主體來創建一個隱藏的iframe（或多個iframe），然后通過javascript提交該表單以提供“ ajaxy”外觀甚至沒有File API支持的應用程序。

Answer 2

您將無法通過AJAX上傳文件。

基本上，AJAX攔截的作用是序列化表單上的值（您可以在控制台上嘗試$('#form_id').serialize()來查看其作用）。

由於文件是從磁盤讀取的，因此提交時您沒有可用的數據，也無法像常規字段一樣通過AJAX進行處理。