0

我正在使用 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");

有没有人有任何想法可能是问题的原因？

提前谢谢了。

4

1 回答 1

0

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

于 2013-05-07T15:24:12.400 回答