问:为什么 .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 的开发者工具的常用位置没有看到任何内容。
- 有什么想法吗?
长文,见谅。