javascript - 保存父页面时，将输入类型=文件保存在 Iframe 中

Question

我在获取 iframe 内的 input type=file 的值并将其传递到父表单中时遇到问题，因此当保存父表单时，输入文件的值会异步保存。

尝试在 Controller 中添加 HttpPostedFileBase Image = Request.Files["Image"]; 但该值始终为 null

这是 Iframe 内容

 <div class="form-group">
            @Html.LabelFor(model => model.Image, new { @class = "control-label col-md-2 required" })
            <div class="col-md-10">
                <input type="file" name="Image" id="Image" style="display:none" />
                <input type="button" value="Upload File" id="alterFile" /> <label id="filename"></label>

                @Html.ValidationMessageFor(model => model.Image, "", new { @class = "text-danger" })
            </div>
        </div>

但是每次提交的时候，该字段的值为null，有没有办法获取iframe内容并保存到父表单中？谢谢

Answer 1

在您的示例中，您有一个文件输入和一个按钮。

我假设您希望将"file"类型的输入隐藏在用户界面上，并仅提供一个“上传文件”按钮。

要使用 javascript 执行此操作，您需要执行如下操作:

var alterFile = document.getElementById('alterFile');
var fileInput = document.getElementById('Image');
var fileValue = document.getElementById('fileValue');
fileInput.addEventListener('change', function() {
  fileValue.textContent = fileInput.value; 
});

alterFile.addEventListener('click', function() {
  fileInput.click();
});

<input type="file" name="Image" id="Image" style="display:none" />
<input type="button" value="Upload File" id="alterFile" /> <label id="filename"></label>
<label id="fileValue">Dummy Value</label>

在更改处理程序中，您可以按照您的意愿进行操作，例如将值传递给顶级 iframe 等。