Javascript Iframe文件上传器提交到新选项卡

我已经浏览了这个问题的各种其他答案，但我无法解决这个问题，我想我已经遵循了我在上面找到的每一条建议

我正在开发一个普通的JavaScript应用程序，它需要通过Iframe上传文件。我正在通过JavaScript创建表单和iframe。正在使用JS

.submit（）

触发文件上传器表单，表单的目标属性设置为iframe的name和ID属性

尽管如此，表单在提交后会打开一个新窗口

以下是我创建表单的方式：

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');

document.getElementById('file-uploader').submit(); 这是表单在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>

费用参考*

以下是我提交表格的方式：

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');

document.getElementById('file-uploader').submit(); document.getElementById（'file-uploader'）.submit（）； 我也试过：

document.getElementById('submit-file-upload-form').click(); document.getElementById（'submit-file-upload-form'）。单击（）； 我不确定表单为什么提交到新选项卡。PHP显然运行得很好，因为新的选项卡显示了我设置的错误和成功消息，但它并没有按预期发布到iframe

---

编辑：请忽略我包含的

newElement

函数。我创建it函数只是为了加快新HTML元素的编写过程，因为我已经用JS创建了应用程序HTML界面的每个部分。

在聊天中使用@syedmh后，确定了更好的方法包括两件事：

• 在页面源代码中对

  iframe

  进行硬编码，解决了定位框架、删除事件委派问题和
• 切换到

  formData（）

  将使OP top受益于上传文件的最新技术

---

“PHP显然运行良好”-因此这不是一个“PHP”问题。标签应该被移除，因为它具有误导性，使问题变得不清楚。谢谢<在iframe中的code>frameboarder。应该读作

frameborder

。我不知道这是否有区别，但它仍然需要这样解读。我不是JS的人，所以我在这方面帮不了什么忙。编辑：与

setAttribute相同（'frameboarder'

。你能给我们看一下为目标呈现的标记吗？当JS第一次运行时，目标可能不存在，因此在执行单击时目标不可用。你可能必须使用事件委派。我重新讨论了这个问题，看看是否有任何进展。你尝试了@JayBlanchard在注释？没关系，我看到了渲染的iframe。因为在执行AJAX调用的同时渲染iframe，所以目标iframe不存在，这就是为什么会打开另一个选项卡。您需要使用来解决此问题。