如何在JSF 2.2 ajax请求中添加客户端进度监听器？

Question

我正在尝试向JSF2.2 ajax请求添加客户端进度条。我理想的做法是获取请求标头大小并接收POST.

状态的更新

我对JS/JQuery了解不多，但就我所知，JQuery必须发起请求才能实现此目标（see here）

有没有办法从客户端执行此操作？

如果无法做到这一点，我还有其他（本机）选项吗？

谢谢，

PS1。虽然这个主要范围，是一个文件上传进度条，我希望能够对完整的请求大小进行申请。 PS2。我知道有一些图书馆免费提供这个，但ATM我不想使用任何。

Answer 1

经过一些研究，这比最初出现的要复杂得多。

JSF和多个文件

首先，JSF 2.2定义<h:inputFile>标记，该标记仅限于单个文件，即它不支持HTML5参数multiple=true。有关详细信息，请参阅this。另一方面，由于上传的文件是从request获取的，所以很容易扩展此标记以允许多个文件，因此它们很容易获得。

解析并保留文件的位置在哪里？

所有JSF请求都由FacesServlet处理，其中使用Servlet的3.1标记@MultipartConfig进行注释。这个注释基本上完成了提取和写入上传文件的所有繁重工作。请参阅this和this。

虽然这非常方便并且可以处理大多数事情，但它没有进度监听器界面，这意味着您可以在完全上载文件时获取文件（Parts）。我没有看到实际拦截的方法，这是一种干净的方式，以实现服务器端进度条。

服务器端与客户端进度监听器

为了实现服务器端进度监听器，您需要以某种方式自己处理文件，并使用polling或WebSockets通知用户有关进度的信息。

对于客户端，您需要编写自定义POST函数，例如this或使用像this这样的库来处理POST。浏览器不提供进度信息。基本上，您不是使用浏览器功能来发布帖子（AFAIK），而是自己处理请求，因此您可以控制传输的字节数。这里的问题是FacesServlet期望一个由jsf.js函数格式化的请求，我没有看到一个简单的方法来拦截JS请求只是为了处理文件上传。

那么我的选择是什么？

我建议使用提供此功能的现有库。 如果你有时间并且仍然想要DIY，我认为最好的方法是编写自己的FileUploadServlet'理解'JSON或XHR并使用{{1插件启动上传并提供客户端进度条。

示例

我最终决定选择JQuery/blueimp fileupload。有关详细信息，请参阅 this comment 。请注意，这实际上并不是普通JSF Flow的一部分，我开发了一种自定义方式来为我的应用程序中的实际部分提供信息。

PS。由于我是新手，不要把这个答案看作是一个明确的答案，而是作为你自己研究的起点。

Answer 2

我发现Malsup Form plugin for jQuery非常简单，并且有很好的文档和演示代码（因此很容易用到Ajaxify进度条），如果你想使用jQuery（Javascript）路由，它可以保持正常运行客户方。

（当然，还存在其他插件，例如BlueImp file uploader plugin，其中有很多可能性，但可能不那么容易使用。）

对于＆＃34;仅限JSF＆＃34;解决方案，BalusC recommends using a JSF component library like Primefaces - 这可能是一个更好的选择 - 建议阅读他提供的评论和链接，解释一种技术偏好背后的推理。