Upload file đơn giản với JSF 2.2


JSF (Java Server Face) 2.2 bổ sung thêm thẻ inputFile cho phép upload file lên server web trở nên đơn giản hơn bao giờ hết.

1. Tạo Website sử dụng JSF 2.2
2. Tạo managebean như sau:

package codes;
import java.io.IOException;
import java.util.logging.Level;
import java.util.logging.Logger;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import javax.faces.context.FacesContext;
import javax.servlet.http.Part;
/**
 *
 * @author ntdan
 */
@ManagedBean
@RequestScoped
public class Upload_File {

    private Part file;
    private String fileName;
    private long fileSize;
    
    /**
     * Creates a new instance of Upload_File
     */
    public Upload_File() {
    }

    public Part getFile() {
        return file;
    }

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

    public String getFileName() {
        return fileName;
    }

    public void setFileName(String fileName) {
        this.fileName = fileName;
    }
    
    public String upload()
    {
        try {
            // get name of selected file
            fileName = file.getSubmittedFileName();
            // get file's size
            fileSize = file.getSize();
            // get fullpath of opload folder in web root
            String dirPath= FacesContext.getCurrentInstance().getExternalContext().getRealPath("/upload");
            // write file to upload folder
            file.write(dirPath + "/" + fileName);
            
        } catch (IOException ex) {
            Logger.getLogger(Upload_File.class.getName()).log(Level.SEVERE, null, ex);
        }
        
        return "view";
    }

    public long getFileSize() {
        return fileSize;
    }

    public void setFileSize(long fileSize) {
        this.fileSize = fileSize;
    }
}

3. Tạo trang index.xhtml để upload file như sau:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        Demo for upload file
        <f:view>
            <h:form enctype="multipart/form-data">
                File:<br/>
                <h:inputFile value="#{upload_File.file}"/>
                <br/>
                <h:commandButton value="Upload" action="#{upload_File.upload()}"/>
                <br/>
                File:${upload_File.fileName} - #{upload_File.fileSize} bytes !
            </h:form>

        </f:view>

    </h:body>
</html>

4. Tạo trang xem ảnh vừa upload và thông tin về hình

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <h:head>
        <title>Facelet Title</title>
    </h:head>
    <h:body>
        <f:view>
            <br/>
                File:${upload_File.fileName} - #{upload_File.fileSize} bytes !
                <br/>
            <h:graphicImage url="/upload/#{upload_File.fileName}" width="400px"/>
        </f:view>

    </h:body>
</html>

OK, chạy trang index.xhtml –> chonj file upload hệ thống sẽ chuyển qua trang view.xhtml để xem ảnh vừa upload.

Advertisements

2 thoughts on “Upload file đơn giản với JSF 2.2

Phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s