Javascript 将图像和数据组合成1个html表单

好的，这就是我要做的。我正在创建一个web应用程序，它捕获图像并显示在页面的iframe中。我还以另一种形式捕获数据（我们将使用（firstname和lastname）例如，在完成应用程序时会填写更多字段。在应用程序的末尾，我知道有一个表单捕获了所有数据，还有一个表单捕获了图像。我的问题是如何提取表单图像并将其放入数据表单中。作为javascript变量（例如myvalue3）这就是我能想到的，只是对如何将两种形式连接在一起感到困惑

表格#1图像捕获

<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（“图像”）；
var宽度=400；
函数handleFiles（）{
var filesToUpload=document.getElementById（'input'）.files；
var file=filesToUpload[0]；
//创建文件读取器
var reader=new FileReader（）；
//将图像加载到文件读取器后进行设置
reader.onload=函数（e）{
img.onload=函数（）{
如果（this.naturalWidth>width）{
这个。宽度=宽度；
}
}
img.src=e.target.result；
}
reader.readAsDataURL（文件）；
}

表格#2数据捕获

<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>

---

这不是您想要的答案，但这里有一个减少代码的小技巧……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);
}

---

这不是您想要的答案，但这里有一个减少代码的小技巧…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);
}

---

通过iframe传输文件和blob是可能的，有时任务会很复杂，具体取决于iframe的来源。如果家长可以使用javascript访问childs窗口，那么您就可以了。否则，您需要使用postMessage，firefox可能会在跨来源传输blob方面受到更多限制，但有办法解决

现在，另一个问题是，当您可以修改表单、插入输入并更改值时，文件输入仍然是只读的，因此您无法从1Image Capture获取文件并将其插入到2Data Capture或该mather的任何其他表单。
您可以在w3c github中投票表示您想要此功能

• 您可以用另一种方法进行操作，获取所有输入并将它们插入到imageCapture中
• 另一个选项是使用和创建自己的表单，并使用ajax上传它们

---

通过iframe传输文件和blob是可能的，有时任务会很复杂，具体取决于iframe的来源。如果家长可以使用javascript访问childs窗口，那么您就可以了。否则，您需要使用postMessage，firefox可能会在跨来源传输blob时受到更多限制，但有办法解决

现在，另一个问题是，当您可以修改表单、插入输入并更改值时，文件输入仍然是只读的，因此您无法从1Image Capture获取文件并将其插入到2Data Capture或该mather的任何其他表单。
您可以在w3c github中投票表示您想要此功能

• 您可以用另一种方法进行操作，获取所有输入并将它们插入到imageCapture中
• 另一个选项是使用和创建自己的表单，并使用ajax上传它们

---

这两个表单在不同的帧中吗？你不能只使用一个表单吗？是的，有两个不同的帧。这两个表单在不同的帧中吗？你不能只使用一个表单吗？是的，有两个不同的帧。我所做的似乎有效的是捕获图像的原始iframe。我现在已经添加到captureData表单中。什么我所做的是隐藏表单，当我捕获图像时，我会将捕获的图像显示在未隐藏的iframe中。如果您需要更多解释，我将发布代码说明我是如何做到这一点的，因为我从您的帖子中了解到，您无法轻松地传输文件并将其放入另一个表单传输文件总是可以完成的。这是将它们附加到另一个表单中是复杂的。为此，你需要使用FormData。我所做的似乎有效的是捕获图像的原始iframe。我现在已添加到captureData表单。我所做的是隐藏表单，当我捕获图像时，捕获的图像显示在未隐藏的iframe中。如果你需要更多解释，我将发布代码，说明我如何我是这样想的，因为我从你的帖子中了解到，你不能轻松地传输文件并将其放入另一个表单。传输文件总是可以完成的。它将文件附加到另一个表单中，这很复杂。为此，你需要使用FormData