0

столкнулся с проблемой отправки файла на сервер после того как форма удалена из DOM.

Мой скрипт отправки данных работает следующим образом:

  1. при наступлении события 'input' на любом поле ввода формы данные поля записываются в объект, который в последствии передаётся на сервер.

  2. далее при нажатии кнопки отправки данных вызывается метод отправки данных, а сама форма удаляется методом 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» не принадлежит ни к какой форме !

Т.е. здесь ключевым моментом является то, что элемент не принадлежит ни к какой форме. И это надо как-то обойти...

2
  • Да можете так сделать с использованием Blob. Но, зачем вам это? Зачем такие сложности? В чем смысл? Вы знаете, иногда автокомплит с браузера не вызывает событие input, также некоторые клавиатуры на мобильном не вызывают событие input. 21 янв 2021 в 8:37
  • Какое событие будет срабатывать при взаимодействии с формой в данном случае носит второстепенный характер. Можно использовать и событие 'change' или что-то подобное... дело не в этом. Можно посмотреть пример с BLOB?
    – GeoS
    21 янв 2021 в 9:27

1 ответ 1

0

Можно сохранять ссылку не на дом элемент, а на список файлов.

let obj = { //объект для отправки на сервер
};
//добавить в obj данные поля file
document.body.querySelector('input[type=file]').addEventListener('input', function() {
  obj[event.target.name] = event.target.files;
});

//добавить в 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('click', function(event) {
  document.body.querySelector('#my_form').remove();
  console.log(obj);
  event.preventDefault();
  // проверка, что действительно файл доступен после удаления формы.
  setTimeout(() => {
    readFile(obj.file[0]);
  }, 500);
});

function readFile(file) {
  var reader = new FileReader();
  reader.onload = function(e) {
    // The file's text will be printed here
    console.log(e.target.result)
  };

  reader.readAsText(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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.