如何通過 Ajax 將文件從 JavaScript 傳輸到 PHP

Question

我有一個用戶輸入他的名字並選擇個人資料圖片的表單。 這些信息和頭像應該通過ajax和php添加到mysql db中。

HTML :

<form id="addWorkerForm" action="addWorker.php" method="post">
  Prename:<input type="text" name="prename" id="prename">
  Lastname:<input type="text" name="lastname" id="lastname">
  Image:<input type="file" id="file_input" name="file_input" >
</form>

Javascript：

var prename = $('#prename').val();    
var lastname = $('#lastname').val();    
var workerAvatar = $('#file_input').val();

var url = 'xyz/addWorker.php?prename=' + prename + '&lastname=' + lastname + '&avatar=' + workerAvatar;

$.ajax({
    url: url,
    dataType: 'json',
    async: false,
    success: function(data) {

    }
});

這是訪問文件以在javascript中獲取其內容的正確方法嗎？ 此外，如何訪問php文件中的文件？

Answer 1

不，不幸的是，您無法通過將文件的值傳遞給 php 來上傳文件。 您必須自己上傳文件，或者如果您想繼續使用 AJAX 方法，請使用類似Plupload 的方法

您希望得到的是對上傳文件名稱的引用，然后將其存儲在<input type="hidden" value="XXXXXXXX.jpg"/> ，並將其作為您的workerAvatar 。 然后當你加載頁面時，只需在<img src="XXXXX.jpg"/>引用它

Answer 2

我最近遇到了一個非常相似的問題，我的問題得到了解答（ JQuery1.8.0: Sending files from forms via AJAX ）。

長話短說，您可以通過 AJAX 發送文件，但是您需要使用 FormData() 來執行此操作，因為該文件需要編碼為 XmlHttpRequest 最近才能夠執行的“multipart/form-data”（ https:/ /developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData ）。

應該是這樣的：

<button id="ajaxUploadSubmit"> Submit </button>
<script>
var data    = new FormData(document.forms.namedItem("workerAddForm"));

$( "#ajaxUploadSubmit" ).click(function() {
    var oReq    = new XMLHttpRequest();
    oReq.open("POST", "xyz/addwrker.php", true);
    oReq.setRequestHeader("X-Requested-With", "XMLHttpRequest"); //necessary for my application, might not be for you, I'm using CakePHP

    oReq.onload = function(oEvent) {   
        //whatever you want with oReq.responseText
        }
    oReq.send(data);
    };
</script>

Answer 3

你可以試試這個AjaxFileUpload插件