Загрузчик файлов iframe отправляется на новую вкладку

Я просмотрел различные другие ответы на этот точный вопрос, но я не смог решить проблему, и я думаю, что следовал всем советам, которые я нашел там.

Я работаю над ванильным приложением JavaScript, которое должно загружать файлы через Iframe. Я создаю форму и фрейм через JavaScript. Форма .submit() файла запускается с использованием JS .submit() , и для ее целевого атрибута формы заданы атрибуты name и ID iframe.

Несмотря на это, форма открывает новое окно после отправки.

Вот как я создаю форму:

function newElement(elementType, elementID, elementClass, elementInnerText){
    let element = document.createElement(elementType);
    if(elementID != undefined){
        element.id = elementID;
    }
    if(elementClass != undefined){
        element.classList.add(elementClass);
    }
    if(elementInnerText != undefined){
        element.innerText = elementInnerText;
    }
    return element;
}

parentElement.appendChild(newElement('FORM','file-uploader','expense-details',undefined));

var fileUploadForm = formFieldWrapper.querySelector('form');
fileUploadForm.setAttribute('action', '/link/to/process.php');
fileUploadForm.setAttribute('method', 'post');
fileUploadForm.setAttribute('enctype', 'multipart/form-data');

fileUploadForm.appendChild(newElement('LABEL',undefined,'add-expense-form-field-label',undefined));
var formFieldLabel = formFieldWrapper.querySelector('label');

fileUploadForm.appendChild(newElement('INPUT',undefined,'add-expense-form-field',undefined));
var formField = formFieldWrapper.querySelector('input');
formField.setAttribute('type', 'file');
formField.setAttribute('name', 'expense_reference');

fileUploadForm.appendChild(newElement('INPUT','submit-file-upload-form',undefined,undefined));
var fileUploadSubmit = fileUploadForm.querySelector('#submit-file-upload-form');
fileUploadSubmit.setAttribute('style', 'display: none; height: 0px; width: 0px; border: 0px;');
fileUploadSubmit.setAttribute('type', 'submit');
fileUploadSubmit.setAttribute('name', 'upload-file');

var iframeWrapper = newElement('IFRAME','iframe-uploader',undefined,undefined);
fileUploadForm.appendChild(iframeWrapper);
iframeWrapper.setAttribute('id', 'iframe-uploader');
iframeWrapper.setAttribute('name', 'iframe-uploader');
iframeWrapper.setAttribute('height', 飮px');
iframeWrapper.setAttribute('width', 饒px');
iframeWrapper.setAttribute('frameboarder', Ɔ');
iframeWrapper.setAttribute('scrolling', 'yes');
fileUploadForm.setAttribute('target', 'iframe-uploader');

Вот как форма отображается в HTML:

<div id="form-field-1" class="expense-details-wrapper">
  <form id="file-uploader" class="expense-details" action="/link/to/process.php" method="POST" enctype="multipart/form-data" target="iframe-uploader">
    <label class="add-expense-form-field-label">Expense Reference*</label>
    <input class="add-expense-form-field" type="file" name="expense_reference[]" placeholder="Expense Reference" required="true" multiple="false" accept=".jpg, .png, .pdf" priority="primary">
    <input id="submit-file-upload-form" style="display: none; height: 0px; width: 0px; border: 0px;"
      type="submit" name="upload-file">
    <iframe id="iframe-uploader" name="iframe-uploader" height="150px" width="250px" frameboarder="0" scrolling="yes"></iframe>
  </form>
</div>

Вот как я отправляю форму:

document.getElementById('file-uploader').submit();

Я также попробовал это:

document.getElementById('submit-file-upload-form').click();

Я не уверен, почему форма отправляется на новую вкладку. PHP, очевидно, работает нормально, потому что новая вкладка показывает мне сообщения об ошибках и успехах, как я их настроил, но он не публикует в iframe, как предполагалось.

РЕДАКТИРОВАТЬ: Пожалуйста, не newElement внимания на функцию newElement которую я включил. Я создал эту функцию только для ускорения процесса написания новых HTML-элементов, потому что я создал каждую часть HTML-интерфейса приложения с помощью JS.

Всего 1 ответ


После работы с @syedmh в чате было определено, что лучший способ состоит из двух вещей:

  • Жесткое программирование iframe в исходном коде страницы решает проблему нацеливания на фрейм, устранения проблем делегирования событий и
  • Переключение на formData() позволило бы OP извлечь выгоду из более современной технологии загрузки файлов

Есть идеи?

10000