通过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'] : '');