手动为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

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

• 要引用列表项，您可以使用 handler 参数 - 它是在不同的callBack方法之间共享的对象，但对于每个单独的文件上载都是唯一的。
• 处理程序对象包含文件上载设置，每个文件上传初始化时为cloned。
• 有关如何存储其他对象（例如列表项或上传行）的示例，请参阅jquery.fileupload-ui.js的源代码。

关于用户界面实施：

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