XMLHttpRequest POST multipart/form-data

Question

Я хочу использовать XMLHttpRequest в JavaScript для POST формы, которая включает в себя элемент ввода типа файла, чтобы я мог избежать обновления страницы и получить полезный XML обратно.

Я могу отправить форму без обновления страницы, используя JavaScript, чтобы установить целевой атрибут формы в iframe для MSIE или объект для Mozilla, но это имеет две проблемы. Незначительная проблема заключается в том, что цель не совместима с W3C (поэтому я установил ее в JavaScript, а не в XHTML). Основная проблема заключается в том, что событие onload не срабатывает, по крайней мере, не в Mozilla на OS X Leopard. Кроме того, XMLHttpRequest сделает для более красивого кода ответа, потому что возвращенные данные могут быть XML, а не ограничены XHTML, как в случае с iframe.

Отправка результатов формы в HTTP, который выглядит как:

Content-Type: multipart/form-data;boundary=<boundary string> 
Content-Length: <length> 
--<boundary string> 
Content-Disposition: form-data, name="<input element name>" 

<input element value> 
--<boundary string> 
Content-Disposition: form-data, name=<input element name>"; filename="<input element value>" 
Content-Type: application/octet-stream 

<element body> 

Как получить метод отправки объекта XMLHttpRequest, чтобы дублировать выше поток HTTP?

Answer 1

Вы можете построить «/ многослойные данные формы» запрос самостоятельно (подробнее об этом в http://www.faqs.org/rfcs/rfc2388.html), а затем использовать send метод (то есть. XHR. отправить (ваш-многочастному форм-данных)). Точно так же, но проще, в Firefox 4+ (также в Chrome 5+ и Safari 5+) вы можете использовать интерфейс FormData, который помогает создавать такие запросы. Метод send хорош для текстового содержимого, но если вы хотите отправить двоичные данные, такие как изображения, вы можете сделать это с помощью метода sendAsBinary, который существует примерно начиная с Firefox 3.0. Подробнее о том, как отправлять файлы через XMLHttpRequest, см. В http://blog.igstan.ro/2009/01/pure-javascript-file-upload.html.

Answer 2

Я не понимаю, почему iframe (невидимый) подразумевает XHTML, а не ЛЮБОЙ контент. Если вы используете iframe, вы можете установить событие onreadystatechange и дождаться «complete». Затем вы можете использовать frame.window.document.innerHTML (пожалуйста, кто-то меня исправит), чтобы получить результат строки.

var lFrame = document.getElementById('myframe'); 
lFrame.onreadystatechange = function() 
{ 
    if (lFrame.readyState == 'complete') 
    { 
     // your frame is done, get the content... 
    } 
}; 

Answer 3

Существует не способ получить доступ к полю ввода файла внутри JavaScript, так что не является Java-единственным решением для загрузки файлов Ajax.

Есть обходное решение, такое как using an iframe.

Другим вариантом было бы использовать что-то вроде SWFUpload или Google Gears

Answer 4

Вам нужно будет POST к IFrame, чтобы получить эту работу, просто добавьте целевой атрибут в форму, где указать IFrame ID. Что-то вроде этого:

 

<form method="post" target="myiframe" action="handler.php"> 
... 
</form> 
<iframe id="myiframe" style="display:none" /> 
 

Answer 5

я запутать о событии загрузки, который вы указали, что на странице или на IFRAME ?, первый ответ не является правильным, что нет никакого способа сделать это, используя чисто XMLHttpRequest, если что вы хотите получить какой-либо метод, как только ответ существует на iframe, просто проверьте, есть ли у него контент уже или нет, с помощью сценариев DOM, затем запустите метод.

прикрепить OnLoad события к IFRAME

if(window.attachEvent){ 
document.getElementById(iframe).attachEvent('onload', some_method); 
}else{ 
document.getElementById(iframe).addEventListener('load', some_method, false); 
} 

Answer 6

Content-Disposition: форма-данные, имя

Вы должны использовать точку с запятой, например: Content-Disposition: форм-данных; имя

Answer 7

Вот до даты, как с помощью FormData (full doc @MDN)

Сценарий:

var form = document.querySelector('#myForm'); 
form.addEventListener("submit", function(e) { 
    var xhr = new XMLHttpRequest(); 
    xhr.open("POST", this.action); 
    xhr.addEventListener("load", function(e) { 
     // Your callback 
    }); 

    xhr.send(new FormData(this)); 

    e.preventDefault(); 
}); 

(от этой основной формы)

<form id="myForm" action="..." method="POST" enctype="multipart/form-data"> 
    <input type="file" name="file0"> 
    <input type="text" name="some-text"> 
    ... 
</form> 

Еще раз спасибо Алекс Поло за его ответ