Javascript HTML：将表单字段复制到另一个表单，包括 FILE 输入字段？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2220120/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML: Copy form fields to another form including FILE input field?
提问by pMan
I came to see that form file input field value cannot be set with javascript for security reasons.
我发现出于安全原因，无法使用 javascript 设置表单文件输入字段值。
I just want to copy a FILE input to another form and post it, I searched for a work around and could not find anything, is it possible?
我只想将 FILE 输入复制到另一个表单并发布它，我搜索了一个解决方法但找不到任何东西，这可能吗？
UPDATE: my code:
更新：我的代码：
function prepareUpload( filevalue ){
document.getElementById('logo').value =filevalue;
var mform = document.getElementById('sleeker');
ajaxUpload( mform,'<?php echo base_url(); ?>'); // a methods to upload...
}
<input class="input-file-upload" type="file" size="20" name="logodummy" id="logodummy" onchange="prepareUpload( this.value );" />
<form action="" method="post" name="sleeker" id="sleeker" enctype="multipart/form-data" onbeforesubmit="return false;">
<p><input type="hidden" name="logo" id="logo" /></p>
</form>
Anything other thatn file input are working fine, and I could receive with $_POST, but $_FILES doesn't have values. And this code alone working fine too. I think this coe is enough?
任何其他文件输入都可以正常工作，我可以用 $_POST 接收，但 $_FILES 没有值。仅此代码也可以正常工作。我觉得这个coe就够了？
采纳答案by Daniel Vassallo
Yes, you can place the <input type="file">outside your HTML form, and then use the onChangeevent to fill an <input type="hidden">within the form that gets posted:
是的，您可以将<input type="file">HTML 表单的外部放置，然后使用该onChange事件<input type="hidden">在发布的表单中填充一个：
<input type="file"
onchange="document.getElementById('hidden_file').value = this.value;" />
<form method="POST">
<input type="hidden" id="hidden_file" value="" />
<input type="submit" />
</form>
However in modern browsers, you will only be able to access the file name, and not the full path. You may want to check the following Stack Overflow posts for further information on this topic:
但是在现代浏览器中，您只能访问文件名，而不能访问完整路径。您可能需要查看以下 Stack Overflow 帖子以获取有关此主题的更多信息：
- Can't get the complete address while uploading a file
- How to get the file path from HTML input form in Firefox 3
UPDATE:
更新：
The original question made me think that you only needed to copy the "file name" to another HTML form, and not the whole <input type="file">representation.
最初的问题让我认为您只需要将“文件名”复制到另一个 HTML 表单，而不是整个<input type="file">表示形式。
Further to the update, I assume you meant something like this:
在更新之后，我假设您的意思是这样的：
<input type="file"
onchange="document.getElementById('hidden_file').value = this.value;" />
<form method="POST">
<input type="file" id="hidden_file" value="" />
<input type="submit" />
</form>
Unfortunately the above does not work. Firefox will return "Security error code: 1000"if you try the above example.
不幸的是，上述方法不起作用。"Security error code: 1000"如果您尝试上述示例，Firefox 将返回 。
As for some workarounds, you may want to the check David Dorward's suggestions:
至于一些解决方法，您可能需要查看David Dorward的建议：
回答by Quentin
You could move the file input to the other form (with appendChild or insertBefore), submit the form, and then move it back.
您可以将文件输入移动到另一个表单（使用 appendChild 或 insertBefore），提交表单，然后将其移回。
回答by Quentin
回答by Rembunator
Very much similar to cloneNode except in jQuery
除了在 jQuery 中，与 cloneNode 非常相似
In an xulrunner browser (like firefox) I have successfully used something like the following:
在 xulrunner 浏览器（如 firefox）中，我成功使用了以下内容：
$('input:file').clone().appendTo($('#mainform'));
This should copy all file input objects into the form with id=mainform.
这应该将所有文件输入对象复制到 id=mainform 的表单中。
Avoid using the id attribute in the objects to be cloned. id's should always be unique.
避免在要克隆的对象中使用 id 属性。id 应该始终是唯一的。
回答by Christopher Thomas
I realised that this might be late to the party, but with HTML5, you can use the "form" attribute to target a form, like [form id="the_form"]...[/form]....[input form="the_form type="file" ... /]
我意识到这可能会迟到，但是对于 HTML5，您可以使用“form”属性来定位表单，例如 [form id="the_form"]...[/form]....[input form="the_form type="file" ... /]
