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>

我想将文件输入“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();
 });

第一次选择上传图像时，窗口小部件可以运行，脚本会运行，但不会将图像传递给脚本。

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

似乎在线上摔倒了： $ this.after（$克隆）.appendTo（ “形式＃upload_image”）;

有没有人有任何想法可能导致问题？

非常感谢提前。

Answer 1

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

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

1 个答案: