如何将文件输入克隆到隐藏iframe中的另一个文件输入 [英] how to clone a file input to another file input which is in hidden iframe

问题描述

我有一个具有文件输入元素的表单，当用户选择文件时我想将所选文件设置为隐藏iframe中的另一个文件输入，

<这就是我的表格：

 < form name =uploadForm> 
< input type =fileid =fileonename =fileonevalue =/> 
< button type =buttonid =attachement_uploadonclick =addFile（）> Upload< / button> 
< / form> 
< iframe id =FileUploadFramename =FileUploadFramesrc =style =display：none; border：0; width：0; height：0;> 
< form id =FileUploadFormname =FileUploadFormaccept-charset =utf-8target =FileUploadFrameenctype =multipart / form-dataencoding =multipart / form-datamethod =POSTaction =CIMtrek_Regional_WhseForm_FileUpload> 
< input type =fileid =filetwoname =filetwovalue =/> 
< / form> 
< / iframe> 
  

和我的java脚本：

  function addFile（）{
 //这是我要将fileone克隆到filetwo并提交iframe中的表格
} 
  

我见过这样的事情但真的不知道该怎么办：

  $（。inputfield1）。change（function（）{
 var $ this = $（this），$ clone = $ this.clone（）; 
 $ this.after（clone）.appendTo（hiddenform）; 
}）; 
  

请帮助我完成这项工作。

解决方案

你不能（或不应该）能够这样做。 文件输入类型，因为它可以直接访问用户的文件系统，具有特殊的安全限制。最值得注意的是，您无法在JavaScript中设置文件输入的值，因为这样可以让您执行诸如设置之类的操作它类似于〜/ .ssh / id_rsa ，并在用户不知情的情况下窃取重要数据。因此，jQuery应该无法克隆文件输入，因为它无法设置该值。

要实现此功能，您必须让用户点击 iframe 文件输入>，也许使用一些CSS定位技巧使它看起来像页面的一部分。或者，如果您的用户通常拥有更多现代浏览器，则可以使用文件API 和使用Ajax上传文件。

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.

解决方案

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.

这篇关于如何将文件输入克隆到隐藏iframe中的另一个文件输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！