XMLHttpRequest ПУБЛИКУЕТ составную часть / форму-данные

StackOverflow https://stackoverflow.com/questions/155371

  •  03-07-2019
  •  | 
  •  

Вопрос

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

Я могу отправить форму без обновления страницы, используя JavaScript для установки целевого атрибута в форме в iframe для MSIE или object для Mozilla, но при этом возникают две проблемы.Небольшая проблема заключается в том, что target не совместим с 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-поток?

Это было полезно?

Решение

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

Другие советы

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

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

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

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

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

Вам нужно будет ОПУБЛИКОВАТЬ в IFrame, чтобы заставить это работать, просто добавьте целевой атрибут в свою форму, где вы указываете идентификатор IFrame.Что - то вроде этого:


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

меня смущает указанное вами событие onload, оно находится на странице или в 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);
}

Содержание-Диспозиция:форма-данные, имя

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

Вот актуальный способ использования FormData (полный документ @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>

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top