通過JavaScript提交帶有文件上傳的ajax請求

Question

我有一個表單可以通過form.submit()提交，並且回覆是正確的。現在我想使用ajax提交它，但是在提交文件時遇到問題。

的形式很簡單：

<form name="Upload" enctype="multipart/form-data" method="post" action="upload.asp"> 
    <input type="file" name="file" id="fileinput"/> 
    <input type="button" name="FileUpload" class="button" id="append_new" 
    onclick="xmlhttpPost('upload.asp', document.getElementById('fileinput').files[0]);" value="submit file"/> 
</form> 

我Ajax調用如下：

function xmlhttpPost(strURL, form) { 
    var xmlHttpReq = false; 
    var self = this; 
    // Mozilla/Safari 
    if (window.XMLHttpRequest) { 
     self.xmlHttpReq = new XMLHttpRequest(); 
    } 
    // IE 
    else if (window.ActiveXObject) { 
     self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    self.xmlHttpReq.open('POST', strURL, true); 
    self.xmlHttpReq.setRequestHeader('Content-Type', 'multipart/form-data'); 
    self.xmlHttpReq.onreadystatechange = function() { 
     if (self.xmlHttpReq.readyState == 4) { 
      updatepage(self.xmlHttpReq.responseText); 
     } 
    } 
    self.xmlHttpReq.send('file=' + file); 
} 

function updatepage(str){ 
    document.getElementById("fileitems").innerHTML = str; 
} 

現在的問題是：服務器獲得的字符串[object file]，而不是實際的文件內容。我如何確保提交文件數據？

Answer 1

您可以使用formData爲：

function xmlhttpPost(strURL, form) { 
    var xmlHttpReq = false; 
    var self = this; 
    // Mozilla/Safari 
    if (window.XMLHttpRequest) { 
     self.xmlHttpReq = new XMLHttpRequest(); 
    } 
    // IE 
    else if (window.ActiveXObject) { 
     self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    self.xmlHttpReq.open('POST', strURL, true); 
    self.xmlHttpReq.setRequestHeader('Content-Type', 'multipart/form-data'); 
    self.xmlHttpReq.onreadystatechange = function() { 
     if (self.xmlHttpReq.readyState == 4) { 
      updatepage(self.xmlHttpReq.responseText); 
     } 
    } 
    if (!! window.FormData) { 
     var formData = new FormData(); 
     formData.append('file', form); 
     self.xmlHttpReq.send(formData); 
    } 
} 

function updatepage(str) { 
    document.getElementById("fileitems").innerHTML = str; 
} 

Here's與進度的完整的AJAX文件上傳的一個體面的例子。

Answer 2

你缺少這樣的：

self.xmlHttpReq.setRequestHeader("X_FILENAME", file.name); 

這將正常POST和應用層中的文件上傳區分。

如果您使用的是PHP，它看起來是這樣的：

$file = (isset($_SERVER['HTTP_X_FILENAME']) ? $_SERVER['HTTP_X_FILENAME'] : '');