手动执行 jQuery Upload 的 UI 部分

发布于 2024-10-20 11:57:23 字数 805 浏览 5 评论 0原文

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

我想要的外观与 jQuery UI 完全不同，
以便更多地了解这个插件的内部结构

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

在 initUpload 上，为每个文件附加一个列表项
onProgress，在其各自的列表项 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 （或传递给这些函数的其他参数）时，我似乎看不到找到一种方法来引用我想要更新的相应列表项。

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

干杯！

原文

I'm able to upload files already with jQuery File Upload, but I'm trying to do the UI part myself for two reasons:

the look I want is quite different from jQuery UI
to learn the internals of this plugin a bit more

My problem is I can't seem to figure out the flow needed to complete the following actions after files are dropped:

on initUpload, append a list item per file
onProgress, display progress of the file upload in its respective list item
onLoad, change the list item's text to "Complete"

I've figured out how to do 1 properly:

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

My problem is that I don't know how to refer the respective list item after I create the list item. When in either onLoad or onProgress, when I inspect handler (or the other arguments that are passed to those functions), I can't seem to find a way to refer to the respective list item that I want to update.

How do I update each list item properly?

Cheers!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

过期情话 2024-10-27 11:57:23

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

要引用列表项，您可以使用handler参数 - 它是在不同回调方法之间共享的对象，但唯一对于每个单独的文件上传。
handler 对象包含文件上传设置，并且是克隆用于每个文件上传初始化。
有关如何存储其他对象（例如列表项或上传行）的示例可以在 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 元素。