2

问：为什么 .fileupload() 无法返回？（简而言之这个问题）

细节：

我使用 blueimp 的 JQuery 的 fileupload 成功拖放文件，然后由 CarrierWave 处理。大多数情况下它会正确初始化。

我有一个嵌套选项卡界面（引导程序），它根据您选择的选项卡接受不同的文件上传到不同的目标。这也有效。大多数时候，一切都正确初始化，我很高兴。

但相当频繁的 .fileupload() 函数在客户端或服务器上没有任何显示的错误消息时不会返回（崩溃）。我试图找出原因。

（注意：这里的“历史”一词是指我的数据，而不是浏览器历史。）

显示的数据由 ajax 调用加载。和包含在部分form_for中<script>：records/_fileupload.html.erb（如下所示）该ajax调用未加载部分。

<div class="container span9">
  <%= form_for Record.new, :remote => true, :html => { :multipart => true, :id => "fileupload-history"  } do |f| %>
    ....
    <div class="row fileupload-buttonbar" id="fileupload-droptarget-history">
    ....
      <div class="progress progress-success progress-striped active fade">
        <div class="bar" style="width:0%;"></div>
      </div>
  ....

<!-- The loading indicator is shown during image processing -->
<div class="fileupload-loading"></div>

<!-- The table listing the files available for upload/download -->
<table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>

....
<!-- standard "template-upload" template from example code -->
<script id="template-upload-fileupload-history" type="text/x-tmpl">
....

<!-- Empty template to display files available for download (unused) -->
<script id="template-download-history" type="text/x-tmpl"></script>

继续在同一个文件中，注意$(function ()...用于在页面完成加载后运行脚本。

<script type="text/javascript" charset="utf-8">
   $(function () {

此警报将触发...

   alert("fileupload history fileupload.html.erb - A");

   // Initialize the jQuery File Upload widget:
   $('#fileupload-history').fileupload({
     uploadTemplateId: "template-upload-fileupload-history",
     downloadTemplateId: "template-download-history",
     dropZone: $("#fileupload-droptarget-history")
   });

但是以下警报偶尔不会触发，表明 .fileupload() 从未返回（崩溃）。

   alert("fileupload history fileupload.html.erb - B");

为了完成我的示例，这里有一些对碰巧正在查看此代码的人有用的部分。第一个是在上传完成后刷新我显示的数据。

   $('#fileupload-history').bind('fileuploaddone', function (e, data) {
     fillHistoryAjaxHolder($("#currentAJAXHistoryUrl").html());
   });

...并且这个将拖放限制为仅指定的放置目标。

   // Disable drag-n-drop for the rest of the page
   $(document).bind('drop dragover', function (e) {
     e.preventDefault();
   });
 });
</script>

所以我的问题：

什么会导致 .fileupload 有时不返回？（取决于我如何访问我的页面......或之前加载的内容）

所以我想知道在此之前是否应该进行某种初始化？

现在，使事情复杂化：

我以前有多个模板实例，甚至id="fileupload"其中的模板被复制到许多文件中。但是，我意识到我遇到了不同的目标问题，所以我改变了我id="fileupload"的id="fileupload-history"情况，在这种情况下，id="fileupload-report"在另一种情况下，依此类推。这个想法是将文件上传的每个实例拆分为自己不同的部分。

但是，当我删除旧的（重复的）代码时，.fileupload()故障开始更频繁地发生。（现在它非常可靠地失败了）

所以（最后！）我对有经验的 JQuery 文件上传用户的问题：

  • 对于多个上传目标，我应该使用不同的form_for id='tag'标签吗？

我问是因为以下示例对 .fileupload() 的不同调用使用相同的元素

来自 github 的示例：“Multiple-File-Upload-Widgets-on-the-same-page”：

$('.fileupload').each(function () {
    $(this).fileupload({
        dropZone: $(this)
    });
});
  • 那么，使用不同的$('.fileupload')元素有问题吗？
  • 有没有我应该寻找我可能没有检查的错误消息的地方？
    • 目前，我在 Google Chrome 的开发者工具的常用位置没有看到任何内容。
  • 有什么想法吗？

长文，见谅。

4

0 回答 0