javascript - how to clone a file input to another file input which is in hidden iframe - Stack Overflow

admin管理员组

文章数量:1429089

i have a form which has a file input element and when the user selects the file i want to set the selected file to another file input which is in hidden iframe,

this is what is my form:

<form name="uploadForm" >
    <input type="file" id="fileone" name="fileone" value="" />
    <button type="button" id="attachement_upload" onclick="addFile()" >Upload</button>
</form>
<iframe id="FileUploadFrame" name="FileUploadFrame" src="" style="display: none; border: 0; width: 0; height: 0;">
    <form id="FileUploadForm" name="FileUploadForm" accept-charset="utf-8" target="FileUploadFrame" enctype="multipart/form-data" encoding="multipart/form-data" method="POST" action="CIMtrek_Regional_WhseForm_FileUpload">
        <input type="file" id="filetwo" name="filetwo" value="" />
    </form>
</iframe>

and my java script :

function addFile(){
    //this is where i want to clone the fileone to filetwo and submit the form which is in iframe
}

I have seen some thing like this but really don't know how to do :

$(".inputfield1").change(function(){
  var $this = $(this), $clone = $this.clone();
  $this.after(clone).appendTo(hiddenform);
});

Please help me to get this done.

i have a form which has a file input element and when the user selects the file i want to set the selected file to another file input which is in hidden iframe,

this is what is my form:

<form name="uploadForm" >
    <input type="file" id="fileone" name="fileone" value="" />
    <button type="button" id="attachement_upload" onclick="addFile()" >Upload</button>
</form>
<iframe id="FileUploadFrame" name="FileUploadFrame" src="" style="display: none; border: 0; width: 0; height: 0;">
    <form id="FileUploadForm" name="FileUploadForm" accept-charset="utf-8" target="FileUploadFrame" enctype="multipart/form-data" encoding="multipart/form-data" method="POST" action="CIMtrek_Regional_WhseForm_FileUpload">
        <input type="file" id="filetwo" name="filetwo" value="" />
    </form>
</iframe>

and my java script :

function addFile(){
    //this is where i want to clone the fileone to filetwo and submit the form which is in iframe
}

I have seen some thing like this but really don't know how to do :

$(".inputfield1").change(function(){
  var $this = $(this), $clone = $this.clone();
  $this.after(clone).appendTo(hiddenform);
});

Please help me to get this done.

• javascript
• jquery
• html
• file

Share Improve this question Follow asked Feb 8, 2013 at 12:47 Java QuestionsJava Questions 7,9734343 gold badges119119 silver badges177177 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

You can't (or shouldn't) be able to do this. The file input type, given that it has direct access to the user's file system, has special security restrictions. Most notably you cannot set the value of a file input in JavaScript, as this would allow you to do things like set it to something like ~/.ssh/id_rsa and steal important data without the user being aware. As a consequence, jQuery shouldn't be able to clone the file input because it can't set the value.

To get this to work you'll have to let the user click on the file input that is in the iframe, perhaps using some CSS positioning tricks to make it seem part of the page. Alternatively, if your users typically have more modern browsers, you could use the File API and upload the file with Ajax.

本文标签： javascripthow to clone a file input to another file input which is in hidden iframeStack Overflow