Отправить запрос ajax с загрузкой файла через JavaScript

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 File Uploader с прогрессом.

Answer 2

Вы не хватает этого:

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

Это будет дифференцироваться между нормальным POST и загрузки файлов для приложений уровня.

Если вы используете PHP, это будет выглядеть примерно так:

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