如何使用純香草JavaScript和PHP上傳文件？

我有一個現有的HTML表單，只要用戶選擇一個圖像文件，即可將文件上傳到服務器。如何使用純香草JavaScript和PHP上傳文件？

我已經做了這樣的事情。

//html code 
<input type="file" id="photo" name="photo" accept="image/*" /> 
// the usual html stuff 

document.getElementById('photo').addEventListener("change",uploadImage); 
function uploadImage() 
{ 
    var xhr = new XMLHttpRequest(); 

    xhr.open("POST","/upload.php",true);  
    xhr.setRequestHeader("Content-type","image"); 

    var file = document.getElementById('photo').files[0]; 
    if(file) 
    { 
     var formdata = new FormData(); 
     formdata.append("pic",file); 
     xhr.send(formdata); 
    } 
    xhr.onreadystatechange = function(){ 
    if(xhr.readyState == 4 && xhr.status == 200) 
    { 
      //some code 
    } 
}; 
}

但在我的php文件中，我無法訪問這個上傳的文件。 $_POST數組似乎是空的。我爲$_POST做了print_r，它給了Array()。我究竟做錯了什麼？

來源

2015-12-31 John Strood

你確實知道，文件上傳在' $ _FILES'，而不是'$ _POST'，是否正確？ – Sean

是的，也是空的... –

你不應該設置內容類型，因爲XHR應該自動檢測到你已經附加了一個文件並使用'multipart/form-data'。而且php不理解內容類型'image'，這就是爲什麼你沒有得到任何東西 –

您正在使用FormData，它的工作方式與標準表格非常相似。

首先，在PHP文件中不會在$_POST中，而是在$_FILES,see the documentation。

什麼是文件確實提到，與$_FILES緩衝一起，是你需要使用multipart/form-data編碼，通過XMLHttpRequest轉移任何FormData都會有這樣的缺省設置，雖然你可能要檢查它是否$_FILES保持空。您應該刪除xhr.setRequestHeader("Content-type","image");，讓XHR對象處理它的 - 如果不工作 - 添加

xhr.setRequestHeader("Content-type","multipart/form-data");

有一個很不錯的例子right here at stackoverflow

來源

2015-12-31 16:39:24

你是對的。我刪除它，現在我有'$ _FILES'中的東西。 –

真的不需要設置內容類型。它會自動將其設置爲'multipart/form-data'。 –

如何使用純香草JavaScript和PHP上傳文件？

回答

相關問題