Question

我正在尝试实施JSF 2.3文件上传：

<context-param>
    <param-name>javax.faces.ENABLE_WEBSOCKET_ENDPOINT</param-name>
    <param-value>true</param-value>
</context-param>

XHTML页面：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en"
      xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>About</title>
        <script type="text/javascript">
            function progressBar(data) {
                if (data.status == "begin") {
                    document.getElementById("progressBarId").style.display = "block";
                }
                else if (data.status == "complete") {
                    document.getElementById("progressBarId").style.display = "none";
                }
            }

            function updateProgressBar(percent) {
                var emptyColor = "#cccccc";
                var progressColor = "#3333cc";
                document.getElementById("progressBarId").style.background = "linear-gradient(to right, " + progressColor + " 0%, " + progressColor + " " + percent + "%, " + emptyColor + " " + percent + "%, " + emptyColor + " 100%)";
            }
        </script>
    </h:head>
    <h:body>
        <f:websocket channel="uploadProgress" scope="view" onmessage="updateProgressBar" />

        <h:messages id="uploadMsgId" globalOnly="true" showDetail="false" showSummary="true" style="color:red"/>
        <h:form id="uploadFormId" enctype="multipart/form-data">
            <h:inputFile id="fileToUpload" required="true" requiredMessage="No file selected ..." value="#{uploadBean.file}"/>
            <h:message showDetail="false" showSummary="true" for="fileToUpload" style="color:red"/>
            <h:commandButton value="Upload" action="#{uploadBean.upload()}">
                <f:ajax execute="fileToUpload" onevent="progressBar" render=":uploadMsgId @form"/>
            </h:commandButton>
        </h:form>
        <div>
            <div id="progressBarId" style="display: none; width: 250px; height: 23px; border: 1px solid black;" width="250px;" height="23"/>
        </div>

    </h:body>
</html>

豆：

@Named
@RequestScoped
public class UploadBean
{
    @Inject
    @Push
    private PushContext uploadProgress;

    private static final Logger logger = Logger.getLogger(UploadBean.class.getName());
    private Part file;

    public Part getFile()
    {
        return file;
    }

    public void setFile(Part file)
    {
        this.file = file;
    }

    public void upload()
    {

        if (file != null)
        {

            logger.info("File Details:");
            logger.log(Level.INFO, "File name:{0}", file.getName());
            logger.log(Level.INFO, "Content type:{0}", file.getContentType());
            logger.log(Level.INFO, "Submitted file name:{0}", file.getSubmittedFileName());
            logger.log(Level.INFO, "File size:{0}", file.getSize());

            try (InputStream inputStream = file.getInputStream(); FileOutputStream outputStream = new FileOutputStream("C:" + File.separator + "jsf_files_test_for_delete" + File.separator + file.getSubmittedFileName()))
            {

                long lastTimestamp = System.currentTimeMillis();
                int pushInterval = 1000;
                long totalRead = 0;
                long size = file.getSize();

                int bytesRead = 0;
                final byte[] chunck = new byte[1024];
                while ((bytesRead = inputStream.read(chunck)) != -1)
                {
                    outputStream.write(chunck, 0, bytesRead);
                    totalRead += bytesRead;

                    if (System.currentTimeMillis() > lastTimestamp + pushInterval)
                    {
                        lastTimestamp = System.currentTimeMillis();
                        uploadProgress.send(100.0 * totalRead / size); // Make sure this isn't sent more often than once per second.
                    }
                }

                FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Upload successfully ended!"));
            }
            catch (IOException e)
            {
                FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Upload failed!"));
            }
        }
    }
}

按下上传后，我等待一段时间进行上传过程。看起来我找不到代码的问题。你能告诉我如何解决这个问题吗？

Answer 1

文件上传的工作原理如下：

客户端将文件发送到服务器。
服务器检索文件并保存在内存或tempdisk中。
JSF bean方法将文件保存/移动到永久位置。

此代码仅计算步骤3的进度，而非步骤1和2.遗憾的是<h:inputFile>无法计算前两步的进度，因为：

<h:inputFile>不使用HTML5+XHR file upload，而iframe trick用于向后兼容旧浏览器。没有办法在JavaScript中挂钩iframe提交进度。
Part使用的Servlet 3.0 <h:inputFile> API不会使用流式传输，但会在命中JSF支持bean方法之前先将其完全保存在内存或临时磁盘中。使用本机Servlet API无法挂钩服务器端上载请求解析进度。

因此，在使用JSF方法之前通过网络从浏览器向服务器发送文件的进度仍然未知。也就是说，当您依赖标准API时。理论上的解决方案是创建一个使用HTML5 + XHR文件上传API的自定义组件。

使用例如JSF支持bean方法保存上传文件的进度是可能的。基于websocket的推送，但是将文件保存到服务器端的速度与将文件发送到服务器相比要快得多，因此只显示这部分进度是没有意义的。

不幸的是，它就是这样。考虑使用<p:fileUpload>。

JSF 2.3文件上传速度太慢

1 个答案: