jQuery 和 iFrame "ajax"图像上传器无法正常工作

Question

我正在使用twitter引导程序，更具体地说，是Jasny的文件上传小部件。

http://jasny.github.io/bootstrap/javascript.html fileupload

我必须迎合旧的浏览器，所以我使用它与iframe上传脚本相结合，给ajax上传的用户的错觉。

使用jQuery 1.9.1，我的计划是将文件输入字段从主注册表单克隆到提交给iframe的次要表单。当文件输入发生变化时触发。

我有一个表单与文本字段在它，和一个图像上传器。所讨论的HTML看起来像这样:

<div>
    <span class="btn btn-file">
        <span class="fileupload-new">Select image</span>
        <span class="fileupload-exists">Change</span>
        <input type="file" name="avatar"/>
    </span>
    <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
</div>

我想将文件输入"avatar"克隆到页面底部的另一个表单中，看起来像这样:

<form id="upload_image" name="upload_image" enctype="multipart/form-data" method="post" action="/index.php/ajax/avatar/upload" target="upload_target">
    <!-- just an empty form really -->
    <input id="sent" name="sent" type="submit"  value="Upload" />
</form>

我的JavaScript现在看起来是这样的:

 $("input[name='avatar']").on('change',function(){
      var $this = $(this);
      $clone = $this.clone();          
      $this.after($clone).appendTo("form#upload_image");
      $("form#upload_image").submit();
 });

第一次选择要上传的图像时，小部件工作并且脚本运行，但是没有将图像传递给脚本。

后续尝试，小部件不再更新，脚本不再运行。

它似乎倒在行:(经过美元克隆).appendTo("形式# upload_image");

有谁知道问题的原因是什么吗?

提前感谢。

Answer 1

据我所知，出于安全原因，您不能用预选值克隆文件输入。我不得不使用稍微不那么漂亮的iFrame submit/upload