Я просмотрел различные другие ответы на этот точный вопрос, но я не могу решить эту проблему, и я думаю, что следовал всем советам, которые нашел там.
Я работаю над приложением vanilla JavaScript, которое должно загружать файлы через Iframe. Я создаю форму и iframe через JavaScript. Форма загрузки файла запускается с использованием JS .submit(), а для формы ее атрибут target установлен как атрибут имени и идентификатора 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', '150px');
iframeWrapper.setAttribute('width', '250px');
iframeWrapper.setAttribute('frameboarder', '0');
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. Я создал эту функцию только для ускорения процесса записи новых элементов HTML, поскольку создал каждую часть интерфейса HTML приложения с JS.
.