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.
[embed]https://youtu.be/caDsv_-EHPY[/embed]
1. Tạo Website sử dụng JSF 2.2
2. Tạo managebean như sau:
[sourcecode language="java"]
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;
}
}
[/sourcecode]
3. Tạo trang index.xhtml để upload file như sau:
[sourcecode language="html"]
<?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>
[/sourcecode]
4. Tạo trang xem ảnh vừa upload và thông tin về hình
[sourcecode language="html"]
<?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>
[/sourcecode]
OK, chạy trang index.xhtml --> chonj file upload hệ thống sẽ chuyển qua trang view.xhtml để xem ảnh vừa upload.
No comments:
Post a Comment