столкнулся с проблемой отправки файла на сервер после того как форма удалена из DOM.
Мой скрипт отправки данных работает следующим образом:
при наступлении события 'input' на любом поле ввода формы данные поля записываются в объект, который в последствии передаётся на сервер.
далее при нажатии кнопки отправки данных вызывается метод отправки данных, а сама форма удаляется методом Node.remove().
Это работает со всеми полями ввода, кроме <input type=file/>
.
Псевдо-код для понимания процесса:
<form method="post" enctype="multipart/form-data" id="my_form">
<input type="file" name="file"/>
<input type="text" name="title"/>
<input type="submit" name="submit"/>
</form>
<script>
let obj = { //объект для отправки на сервер
'form_data':{}, //данные формы
'tmpl_data':{...}, //какие-то другие данные
};
let backend = new Backend(obj, ...); //объект, отправляющий данные на сервер
//добавить в obj данные поля file
document.body.querySelector('input[type=file]').addEventListener('input', function(){
obj[event.target.name] = event.target;
});
//добавить в obj данные поля text
document.body.querySelector('input[type=text]').addEventListener('input', function(){
obj[event.target.name] = event.target.value;
});
document.body.querySelector('input[type=submit]').addEventListener('input', function(){
backend.query(); //отправка данных на сервер
my_form.remove(); //удаление формы
});
</script>
Данные полей формы полученные как event.target.value записывают в объект данных obj для сервера "примитивные данные", которые не являются ссылками. С другой стороны информация из input type=file это объект. Т.к. отправка данных происходит ассинхронно, то форма удаляется из DOM до того как была произведена отправка данных на сервер. При этом в консоли я получаю предупреждение: "Form submission canceled because the form is not connected" и отправка данных не происходит.
Я пробовал клонировать объект полученный из поля file, не помогло.
Использование FormData мне не подходит. Также необходимо сохранить логику работы формы, теоретически можно ждать ответа сервера и после этого удалять форму из DOM, но в данном случае такой подход не годится.
Есть ли способ обойти это поведение и отправить данные из поля file на сервер после удаления формы из DOM? Т.е. мне необходимо, чтобы после удаления формы из DOM данные файлового поля были доступны.
Дополнено:
Если форма не удаляется из DOM, то сервер получает примерно такой массив данных:
Array
(
[name] => Array
(
[test] => lamp.png
)
[type] => Array
(
[test] => image/png
)
[tmp_name] => Array
(
[test] => Z:\tmp\php9ECA.tmp
)
[error] => Array
(
[test] => 0
)
[size] => Array
(
[test] => 48141
)
)
Реализовать тоже самое если форма удалена из DOM не получается. Да, можно сохранить ссылку используя псевдо-массив files, и получить из него имя файла, MIME, и размер, но невозможно передать серверу адрес временного хранения файла (в данном случае: Z:\tmp\php9ECA.tmp)
Для отправки данных на сервер я использую старую, но проверенную годами библиотеку JsHttpRequest. Если вставить в DOM просто одно поле ввода файла:
<body>
<input type="file" name="any_file"/>
</body>
и попробовать отправить данные из него на сервер, то я получаю такую ошибку:
Ошибка: JsHttpRequest: не удается найти загрузчик, который может обработать запрос. Примечания: - XML: невозможно использовать загрузчик XMLHttpRequest: прямое использование элементов формы и загрузка не реализованы - SCRIPT: невозможно использовать загрузчик SCRIPT: прямое использование элементов формы и загрузка не реализованы - FORM: элемент «any_file» не принадлежит ни к какой форме !
Т.е. здесь ключевым моментом является то, что элемент не принадлежит ни к какой форме. И это надо как-то обойти...
input
, также некоторые клавиатуры на мобильном не вызывают событиеinput
.