Show progress percentage of h:inputFile upload

Question

I found this very nice example of file upload using JSF 2.2. Is it possible to add progress bar with percent of file upload or total uploaded bytes?

Answer 1

I found that the Malsup Form plugin for jQuery is fairly simple and has good documentation and demo code (therefore fairly easy to use to Ajaxify a progress bar) if you are prepared to go the jQuery (Javascript) route. (Of course, other plugins also exist, like the BlueImp file uploader plugin which has a lot more possibilities, but may not be quite that easy to use.)

For a "JSF-only" solution, BalusC recommends using a JSF component library like Primefaces - which is probably a better option - it is recommended to read his comments and links he provides which explain reasoning behind the preference for one technology over the other.

=== Added example ===

Here is a very basic example, using the Malsup Form plugin and jQuery, that demonstrates the progress bar. (It also handles other fields on the form, if one wants that, but do read up on the pros&cons of the different enctype settings in the

element.) Note that a

with a progress bar and a text label indicating progress percentage is shown, and another

showing some text on completion of the process - any of these elements may be omitted or otherwise customized. These

s are styled via CSS and updated by various event handlers in the Javascript. No work is done in the Java backing bean.

Note:

I hope this is obvious, but the *.js files are saved in the directory /WebContent/resources/js/ for the tags to work correctly.

1. XHTML view, including CSS and Javascript

    
    

    

    
    
      
        //
    


    
        
Demo File upload with progress
        

        
        

            

            
0%
        
        

        

        
        

        
    

2. Backing bean

import java.io.Serializable;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.ViewScoped;
import javax.servlet.http.Part;

@ManagedBean
@ViewScoped
public class UploadBean implements Serializable {
    private static final long   serialVersionUID    = 1L;

    private String              field;
    private Part                file;

    /** Constructor */
    public UploadBean() {}

    /** Action handler */
    public String submit() {
        // the file is already uploaded at this point
        // TODO whatever you need to do with the file and other form values
        return ""; // ... or another view
    }

    // TODO getters and setters for fields
}

0 讨论(0)

发布评论:

提交评论

---

•  加载中...