Question

好的，这就是我想要做的。我正在创建一个Web应用程序，它捕获图像并在页面的iframe中显示。我还以另一种形式捕获数据（我们将使用（名字和姓氏）作为示例，但是在完成应用程序时会填写更多字段。在应用程序结束时，我知道有一个已捕获所有数据的表单和已经捕获图像的表单。我的问题是如何提取表单图像并放置在数据表单中。作为javascript变量（ex.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

不是你要找的答案，但这里有一个小小的提示来减少代码... base64只是不切实际

var img = document.getElementById("image");
img.style.maxWidth = 400

function handleFiles() {
    var fileInput = document.getElementById('input');
    var file = fileInput.files[0];
    // use createObjectURL instead of reading the file
    img.src = URL.createObjectURL(file);
}

Answer 2

传输文件＆amp; blorame通过iframe是可能的，有时复杂的任务取决于iframes起源。如果父级可以使用javascript访问子窗口，那么您将获得get the file inputs reference from parent。否则你需要使用postMessage和firefox可以更加限制传输blob cross origin但是有很多方法。

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

您可以反过来采取所有输入并将其插入到带有imageCapture的表单中。
另一个选择是使用FormData并创建一个自己的表单并使用ajax上传

将图像和数据合并为1个HTML格式

2 个答案: