Это возможно! Читайте ниже.
Прежде всего, позвольте мне использовать эту диаграмму, чтобы объяснить, как асинхронная загрузка файлов может быть достигнута:
Извините. Я закрыл один из своих доменов, и изображение исчезло. Это было действительно хорошее изображение, хотя. Это было до того, как я узнал, что Stack Overflow позволяет загружать изображения через Imgur.
Как видите, хитрость заключается в том, чтобы HTTP-ответ загружался в скрытый элемент IFRAME вместо самой страницы. (Это делается путем установки свойства target элемента FORM при отправке FORM с помощью JavaScript.)
Это работает. Однако проблема, с которой я сталкиваюсь, заключается в том, что серверный скрипт находится в другом домене . FORM-submit - это междоменный HTTP-запрос. Теперь на серверном сценарии включена функция CORS, которая дает моей веб-странице права на чтение данных ответа HTTP-запросов, сделанных с моей страницы, на этот сценарий - но это работает, только если я получаю HTTP-ответ через Ajax, эрго, JavaScript.
Однако в этом случае ответ направлен на элемент IFRAME. И как только XML-ответ попадает в IFRAME, его URL будет сценарий удаления, например http://remote-domain.com/script.pl.
К сожалению, CORS не охватывает этот случай (по крайней мере, я так думаю) - я не могу прочитать содержимое IFRAME, так как его URL не совпадает с URL страницы (другой домен). Я получаю эту ошибку:
Небезопасная попытка JavaScript получить доступ к фрейму с URL
hxxp: //remote-domain.com/script.pl из фрейма с URL
hxxp: //my-domain.com/outer.html. Домены, протоколы и порты должны
матч.
И поскольку содержимое IFRAME является документом XML, внутри IFRAME нет кода JavaScript, который мог бы использовать postMessage или что-то в этом роде.
Итак, мой вопрос: Как я могу получить содержимое XML от IFRAME?
Как я уже говорил выше, я могу получать междоменные HTTP-ответы напрямую (с включенным CORS), но мне кажется, что я не могу читать междоменные HTTP-ответы после их загрузки в IFRAME.
И если этот вопрос не является достаточно неразрешимым, позвольте мне исключить эти решения :
easyXDM и аналогичные методы, которые требуют конечной точки в удаленном домене,
изменение ответа XML (для включения элемента SCRIPT),
прокси на стороне сервера - я понимаю, что в моем домене может быть серверный скрипт, который может служить прокси.
Итак, кроме этих двух решений, это можно сделать?
Это можно сделать !!
Оказывается, можно подделать XHR-запрос (Ajax-запрос), который имитирует отправку multipart/form-data FORM (которая используется на изображении выше для загрузки файла на сервер).
Хитрость в том, чтобы использовать FormData конструктор - прочитайте эту статью Mozilla Hacks для получения дополнительной информации.
Вот как вы это делаете:
// STEP 1
// retrieve a reference to the file
// <input type="file"> elements have a "files" property
var file = input.files[0];
// STEP 2
// create a FormData instance, and append the file to it
var fd = new FormData();
fd.append('file', file);
// STEP 3
// send the FormData instance with the XHR object
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://remote-domain.com/script.pl', true);
xhr.onreadystatechange = responseHandler;
xhr.send(fd);
Приведенный выше метод выполняет асинхронную загрузку файлов, что эквивалентно обычной загрузке файлов, описанной на рисунке выше, и достигается путем отправки этой формы:
<form action="http://remote-domain.com/script.pl"
enctype="multipart/form-data" method="post">
<input type="file" name="file">
</form>
Как босс:)