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

Вы можете создать запрос 'multipart / form-data' самостоятельно (подробнее об этом можно узнать на http://www.faqs.org/rfcs/rfc2388.html), а затем использовать метод send (т.е. xhr.send (your-multipart-form-data) Точно так же, но проще, в 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

Нет никакого способа получить доступ к полю ввода файла внутри javascript, поэтому для загрузки ajax-файла не существует решения только для javascript.

Существуют обходные пути, например , с использованием iframe .

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

Answer 3

Это современный способ с использованием 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>

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

Answer 4

Содержание-Расположение: форма-данные, имя

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

Answer 5

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

чтобы прикрепить событие загрузки к iframe

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

Answer 6

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

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

Answer 7

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

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