Question

我找到了使用JSF 2.2进行文件上传的非常好的示例。是否可以添加文件上载百分比或总上传字节数的进度条？

<script type="text/javascript">
            function progressBar(data) {
                if (data.status === "begin") {
                    document.getElementById("uploadMsgId").innerHTML="";
                    document.getElementById("progressBarId").setAttribute("src", "./resources/progress_bar.gif");
                }
                if (data.status === "complete") {
                    document.getElementById("progressBarId").removeAttribute("src");
                }
            }
        </script>

<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>
    <img id="progressBarId" width="250px;" height="23"/>
</div>

豆：

import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.enterprise.context.RequestScoped;
import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import javax.inject.Named;
import javax.servlet.http.Part;

@Named
@RequestScoped
public class UploadBean {

    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())) {

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

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

如果没有其他JavaScript代码，这可能吗？只有JSF？

Answer 1

我发现Malsup Form plugin for jQuery非常简单，并且具有良好的文档和演示代码（因此很容易使用Ajaxify进度条）如果你准备去jQuery（Javascript）路径< / strong>即可。（当然，还存在其他插件，例如BlueImp file uploader plugin，其中有很多可能性，但可能不那么容易使用。）

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

===添加了示例===

这是一个非常基本的例子，使用Malsup Form插件和jQuery来演示进度条。（它还处理表单上的其他字段，如果有人想要，但请阅读enctype元素中不同<form>设置的优缺点。）请注意{{1}带有进度条和文本标签，显示进度百分比，另一个<div>显示完成过程的一些文本 - 这些元素中的任何一个都可以省略或以其他方式定制。这些<div>通过CSS设置样式，并由Javascript中的各种事件处理程序更新。 Java辅助bean中没有工作。

注意：

我希望这很明显，但* .js文件保存在<div>目录中，以使<my-eclipse-project>/WebContent/resources/js/代码正常工作。

<强> 1。 XHTML视图，包括CSS和Javascript

<h:outputScript>

<强> 2。支持豆

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
>
<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Demo File upload with progress</title>

    <style>
        .progress {
            position: relative;
            width: 400px;
            border: 1px solid #ddd;
            padding: 1px;
            border-radius: 3px;
        }

        .bar {
            background-color: #B4F5B4;
            width: 0%;
            height: 20px;
            border-radius: 3px;
        }

        .percent {
            position: absolute;
            display: inline-block;
            top: 3px;
            left: 48%;
        }
    </style>

    <h:outputScript target="head" library="js" name="jquery.js" />
    <h:outputScript target="head" library="js" name="jquery.form.js" /><!-- http://jquery.malsup.com/form/ -->
    <h:outputScript target="body">  
        //<![CDATA[
        jQuery(document).ready(function() {
            var bar = jQuery('.bar');
            var percent = jQuery('.percent');
            var status = jQuery('#status');

            jQuery('#formid').ajaxForm({
                beforeSend: function() {
                    status.empty();
                    var percentVal = '0%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                },
                uploadProgress: function(event, position, total, percentComplete) {
                    var percentVal = percentComplete + '%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                },
                success: function() {
                    var percentVal = '100%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                },
                complete: function(xhr) {
                    status.html(xhr.statusText);
                }
            }); 
        });
        //]]>
    </h:outputScript>
</h:head>
<h:body>
    <h:form id="formid" enctype="multipart/form-data" method="post">
        <h1>Demo File upload with progress</h1>
        <h:messages globalOnly="true" tooltip="true" />

        <h:inputFile id="fileupload" name="fileupload" value="#{uploadBean.file}" />
        <div class="progress">
            <div class="bar"></div>
            <div class="percent">0%</div>
        </div>
        <div id="status"></div>
        <br />
        <h:inputText value="#{uploadBean.field}"></h:inputText>
        <br />
        <h:commandButton id="submit" action="#{uploadBean.submit}" value="Submit" />
    </h:form>
</h:body>
</html>

显示h：inputFile上传的进度百分比

1 个答案: