javascript - 将图像和数据合并为 1 个 html 表单

Question

好吧，这就是我正在尝试做的事情。我正在创建一个网络应用程序，它捕获图像并显示在页面的 iframe 中。我还在另一个表单中捕获数据(我们将使用(名字和姓氏)作为示例，但在完成申请时填写了更多字段。在应用程序的末尾，我知道有一个已捕获所有数据的表单和一个已捕获图像的表单。我的问题是如何提取表单图像并将其放入数据表单中。作为 javascript 变量(例如 myvalue3)，这就是我能够想到的，只是对如何进行混淆将两个表格附加在一起

表格#1ImageCapture

<form action="../uploadimage.php" method="post" enctype="multipart/form-data" target="my_iframe">
<img src="" id="image">
<input type="file" input id="input" name="image" onchange="handleFiles()" style="display: none;"/>
</form>
<iframe name="my_iframe" src="" id="my_iframe"></iframe>

Javascript 捕获

var img = document.getElementById("image");
var width = 400;
function handleFiles() {
var filesToUpload = document.getElementById('input').files;
var file = filesToUpload[0];

// Create a file reader
var reader = new FileReader();
// Set the image once loaded into file reader
reader.onload = function(e) {
  img.onload = function() {
    if (this.naturalWidth > width) {
      this.width = width;
    }
  }
  img.src = e.target.result;
}
reader.readAsDataURL(file);

}

</script>

表格#2DataCapture

<form name="myForm" id="myForm" action="../uploaddata.php" method="POST" target="hidden-form">
<input type="text" name="Firstname" value="%%%myvalue1%%%"/>
<input type="text" name="Lastname" value="%%%myvalue2%%%"/>
</form>

Answer 1

通过 iframe 传输文件和 blob 是可能的，有时甚至是复杂的任务，具体取决于 iframe 的来源。如果父级可以使用 javascript 访问子级窗口，那么您将得到 get the file inputs reference from parent 。否则，您需要使用 postMessage，而 Firefox 在传输 Blob 跨源时会受到更多限制，但有一些方法可以解决它。

现在另一个问题是，虽然您可以修改表单并插入输入并更改值 - 文件输入仍然是只读的，因此您无法从 1ImageCapture 获取文件并将其插入到 2DataCapture 或任何其他表单。
您可以点赞my comment在 w3c github 中表示您想要此功能。

• 您可以反过来做，获取所有输入并将它们插入到使用 imageCapture 的表单中。
• 另一个选项是使用 FormData并创建一个自己的表单并使用ajax上传它们