HTML: Copy form fields to another form including FILE input field?

问题:

I came to see that form file input field value cannot be set with javascript for security reasons.

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?

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?

回答1:

Yes, you can place the <input type="file"> outside your HTML form, and then use the onChange event to fill an <input type="hidden"> within the form that gets posted:

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

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

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.

As for some workarounds, you may want to the check David Dorward's suggestions:

• Using cloneNode
• Moving the input field with appendChild before submitting the form

回答2:

You could move the file input to the other form (with appendChild or insertBefore), submit the form, and then move it back.

回答3:

I haven't tested this in depth, but it appears to work in Firefox.

Use cloneNode

var copy = file_input.cloneNode(1); form2.appendChild(copy); 

回答4:

Very much similar to cloneNode except in jQuery

In an xulrunner browser (like firefox) I have successfully used something like the following:

$('input:file').clone().appendTo($('#mainform')); 

This should copy all file input objects into the form with id=mainform.

Avoid using the id attribute in the objects to be cloned. id's should always be unique.

回答5:

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" ... /]

文章来源: HTML: Copy form fields to another form including FILE input field?