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

Question

我正在使用 twitter bootsrap，更具体地说是 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>

我想将文件输入“头像”克隆到页面底部的另一个表单中，如下所示：

<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();
 });

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

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

它似乎倒在了这条线上： $this.after($clone).appendTo("form#upload_image");

有人知道问题的原因是什么吗？

非常感谢。

Answer 1

据我所知，出于安全原因，您无法使用预选值克隆文件输入。我不得不使用稍微不那么漂亮的 iFrame 提交/上传。