手动为 jQuery Upload 做 UI 部分

Question

我已经可以使用 jQuery File Upload 上传文件，但我尝试自己做 UI 部分有两个原因：

• 我想要的外观与 jQuery UI 完全不同
• 进一步了解这个插件的内部原理

我的问题是我似乎无法弄清楚删除文件后完成以下操作所需的流程：

1. 在 initUpload 上，为每个文件附加一个列表项
2. onProgress，在其各自的列表项中显示文件上传的进度
3. onLoad，将列表项的文本更改为“完成”

我已经弄清楚如何正确地做1：

initUpload: function(event, files, index, xhr, handler, callBack) {
  console.log("here, create list item for " + files[index].fileName);
  callBack();
  return false;
}

我的问题是创建列表项后我不知道如何引用相应的列表项。在onLoad 或onProgress 中，当我检查handler（或传递给这些函数的其他参数）时，我似乎无法找到一种方法来引用我想要的相应列表项更新。

如何正确更新每个列表项？

干杯！

Answer 1

在处理程序回调之间共享对象：

• 要引用列表项，您可以使用 handler 参数 - 它是一个在不同回调方法之间共享的对象，但对于每个单独的文件上传都是唯一的。
• handler 对象包含文件上传设置，每次文件上传初始化都是cloned。
• 在jquery.fileupload-ui.js的源代码中可以找到关于如何存储附加对象（如列表项或上传行）的示例。

关于 UI 实现：

• 即使您同时使用 jquery.fileupload.js 和 jquery.fileupload-ui.js，也可以选择使用 jQuery UI。
• 要实现自己的进度条可视化，您可以使用 initProgressBar 选项。
• uploadTable/downloadTable 和 buildUploadRow/buildDonwloadRow 选项不必引用 HTML table 和 tr 元素，但也可以表示例如HTML ul 和 li 元素。