динамически созданный элемент ввода файла HTML не публикует данные

У меня есть форма, которая динамически создается с помощью document.createElement. Компоненты создаются таким же образом. Форма используется для загрузки файла в PHP-скрипт и при отправке загружает ответ в iframe, указанный целевым атрибутом формы.

К сожалению, сервер получает пустой массив $_FILES, и когда я проверяю запрос POST, я вижу, что данные файла не были включены в запрос. Если вместо этого я на лету использую инструменты разработчика Google Chrome для редактирования динамически созданной формы (в этом процессе я просто РЕДАКТИРУЮ, а затем абсолютно ничего не меняю в коде), отправка формы после этого работает отлично, отправляя соответствующие данные файла .

Так что это заставляет меня понять, что нет ничего плохого в построении моей формы в html, потому что она работала без каких-либо изменений. Что наводит меня на мысль, что браузеру не нравится, когда я динамически создаю элементы ввода файла?

Для полноты картины вот динамически сгенерированная форма:

<form method="POST" action="includes/uploadPic.php" 
      enctype="multipart/form-data" target="fileResponse">
  <input type="file" name="pic">
  <input type="submit" value="Upload">
</form>

А print_r($_FILES) дает пустой массив на сервере.

Кто-нибудь может мне это объяснить? Моя альтернатива состоит в том, чтобы статически создать скрытую форму в документе и просто добавить ее в соответствующий div, когда мне это нужно, но мне очень не нравятся такие вещи.

Ниже приведен код, который генерирует форму:

    var form = document.createElement("form");
    var fileUpload  = document.createElement("input");
    var uploadBut   = document.createElement("input");

    form.setAttribute("method",  "POST");
    form.setAttribute("action",  "includes/uploadPic.php");
    form.setAttribute("enctype", "multipart/form-data");
    form.setAttribute("target",  "fileResponse");
    fileUpload.setAttribute("type",  "file");
    fileUpload.setAttribute("name",  "pic");
    uploadBut.setAttribute ("type",  "submit");
    uploadBut.setAttribute ("value", "Upload");
    form.appendChild(fileUpload);
    form.appendChild(uploadBut);
    dlgContent.appendChild(form);

javascript php html file-upload dhtml
person rewolf    schedule 30.06.2011    source источник
comment
Вы не добавляете свою динамически созданную форму внутрь другого элемента ‹form›, не так ли?   -  person AndrewR    schedule 30.06.2011
comment
Вы смотрели на фактическую транзакцию HTTP, чтобы увидеть, что отправляется из браузера? Существует как минимум один подключаемый модуль для Firefox (данные подделки) который покажет вам каждую HTTP-транзакцию из браузера и позволит вам проверить практически все.   -  person Pointy    schedule 30.06.2011
comment
@AndrewR не является вложенной формой @Pointy Я упоминал, что проверил запрос POST. Все казалось правильным, за исключением того, что ввод файла игнорировался.   -  person rewolf    schedule 30.06.2011
comment
Можете ли вы опубликовать код, который генерирует форму?   -  person Josh    schedule 30.06.2011
comment
Я добавил скрипт генерации формы   -  person rewolf    schedule 30.06.2011
comment
Вы делаете это до или после того, как DOM будет готов?   -  person Michael Irigoyen    schedule 01.07.2011
comment
Это пользовательское событие, которое происходит спустя долгое время после того, как DOM готов.   -  person rewolf    schedule 01.07.2011
comment
К вашему сведению, видя, что это сработает после того, как я отредактировал (но на самом деле ничего не изменил) разметку с помощью инспектора Chrome, я подумал, что, возможно, смогу сделать то же самое с помощью javascript. Итак, после добавления dlg я сделал dlg.innerHTML=dlg.innerHTML, и теперь это работает. Почему? Я понятия не имею. Спасибо :)   -  person rewolf    schedule 05.07.2011

Ответы (2)


arrow_upward
0
arrow_downward

попробуй это:

var form = document.createElement("form");
var fileUpload  = document.createElement("input");
var uploadBut   = document.createElement("input");

form.method = "POST";
form.action = "includes/uploadPic.php";
form.enctype = "multipart/form-data";
form.target = "fileResponse"; /* I think you are trying to submit this from in an iframe */
fileUpload.type = "file";
fileUpload.name = "pic";
uploadBut.type = "submit";
uploadBut.value = "Upload";
form.appendChild(fileUpload);
form.appendChild(uploadBut);
dlgContent.appendChild(form);
person Community    schedule 13.07.2011

arrow_upward
0
arrow_downward

Если вы поместите тег form в тег div, он не будет отправлять динамически созданные элементы на сервер. Однако, если вы возьмете его за пределы тега div или table, он сработает.

person Alex    schedule 29.05.2013