Friday, September 6, 2013

Upload hình ảnh trong jsp

Do một số bạn thường hỏi vấn đề upload tài nguyên trong jsp (chủ yếu lúc làm đồ án) nên tổi để hướng dẫn ở đây để các bạn theo dõi.

Giao diện chọn ảnh

upload

[sourcecode language="html"]
<form name="uploadForm" action="upload.jsp" enctype="multipart/form-data" method="post">
<input type="file" name="file"/>
<input TYPE=Button name='Upload' Value='Upload' onClick="uploadForm.Upload.value='Uploading...';document.uploadForm.action='upload.jsp';document.uploadForm.submit()">
</form>
[/sourcecode]

Kết quả sau khi upload
upload1

[sourcecode language="html"]
<%
response.setContentType("text/html");
response.setHeader("Cache-control","no-cache");

String err = "";
String fileOutPath = request.getRealPath("/").replace('\\','/');
String lastFileName = "";

String contentType = request.getContentType();
String boundary = "";
final int BOUNDARY_WORD_SIZE = "boundary=".length();
if(contentType == null || !contentType.startsWith("multipart/form-data")) {
err = "Ilegal ENCTYPE : must be multipart/form-data\n";
err += "ENCTYPE set = " + contentType;
}else{
boundary = contentType.substring(contentType.indexOf("boundary=") + BOUNDARY_WORD_SIZE);
boundary = "--" + boundary;
try {
javax.servlet.ServletInputStream sis = request.getInputStream();
byte[] b = new byte[1024];
int x=0;
int state=0;
String name=null,fileName=null,contentType2=null;
java.io.FileOutputStream buffer = null;
while((x=sis.readLine(b,0,1024))>-1) {
String s = new String(b,0,x);
if(s.startsWith(boundary)) {
state = 0;
//out.println("name="+name+"<br>");
//out.println(fileName+"<br>");

name = null;
contentType2 = null;
fileName = null;


}else if(s.startsWith("Content-Disposition") && state==0) {
state = 1;
if(s.indexOf("filename=") == -1)
name = s.substring(s.indexOf("name=") + "name=".length(),s.length()-2);
else {
name = s.substring(s.indexOf("name=") + "name=".length(),s.lastIndexOf(";"));
fileName = s.substring(s.indexOf("filename=") + "filename=".length(),s.length()-2);
if(fileName.equals("\"\"")) {
fileName = null;
}else {
String userAgent = request.getHeader("User-Agent");
String userSeparator="/"; // default
if (userAgent.indexOf("Windows")!=-1)
userSeparator="\\";
if (userAgent.indexOf("Linux")!=-1)
userSeparator="/";
fileName = fileName.substring(fileName.lastIndexOf(userSeparator)+1,fileName.length()-1);
if(fileName.startsWith( "\""))
fileName = fileName.substring( 1);
}
}
name = name.substring(1,name.length()-1);
if (name.equals("file")) {
if (buffer!=null)
buffer.close();
lastFileName = fileName;
buffer = new java.io.FileOutputStream(fileOutPath+fileName);
}
}else if(s.startsWith("Content-Type") && state==1) {
state = 2;
contentType2 = s.substring(s.indexOf(":")+2,s.length()-2);
}else if(s.equals("\r\n") && state != 3) {
state = 3;
}else {
if (name.equals("file"))
buffer.write(b,0,x);
}
}
sis.close();
buffer.close();
}catch(java.io.IOException e) {
err = e.toString();
}
}
boolean ok = err.equals("");
if(!ok) {
out.println(err);
}else{
%>
<SCRIPT language="javascript">
//history.back(1)
alert('Uploaded <%=lastFileName%>');
//window.location.reload(false)
</SCRIPT>
<%
}
%>
<img src="<% out.print(request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+request.getContextPath()+"/"+lastFileName);%>
" width="200px" alt="imgeas"/>
[/sourcecode]

Đây chỉ là ví dự đơn giản nhất để các bạn nghiên cứu thêm.

9 comments:

  1. Thầy ơi, còn mih Upload hinh anh vơi primefaces thì sao vậy thầy, e xem nhieu ví dụ mà vẫn không upload lên server được!

    ReplyDelete
  2. primefaces cái này tôi chưa có tìm hiểu nên chưa trả lời em được, ví dụ này em cũng đã đưa lên được server rồi. Tui làm trên nền servlet nên chạy được trên nhiều nên lắm

    ReplyDelete
  3. da, e cam on thay ah

    ReplyDelete
  4. Cảm ơn thầy,
    Thầy cho em hỏi, file ảnh upload lên lưu tại đâu trên server vậy thầy?

    ReplyDelete
  5. Chung thư mục với file upload.jsp. Nếu làm bang netbean thì trong thư mục build->web

    Bạn kiểm tra thử xem

    Nếu cần source thì mail cho tôi, ntdan@ctu.edu.vn

    ReplyDelete
  6. Dạ cho hỏi sao em làm jsp servlet mà khị không tìm được folder chứa hình ảnh vậy ạ, ví dụ em muốn ảnh sau khi upload sẽ nằm trong thu mục "images" trên project đó luôn thì làm ntn?

    ReplyDelete
  7. dong 63
    buffer = new java.io.FileOutputStream(fileOutPath+fileName);

    doi thanh
    buffer = new java.io.FileOutputStream(fileOutPath+"images/"+fileName);

    ReplyDelete
  8. Thầy cho em hỏi nếu em k dùng jsp, em viết trên nền server cục bộ và load giao diện bằng một file abc.xtm nào đó. Vậy để upload 1 file bất kỳ thì code thế nào vậy Thầy

    ReplyDelete
  9. Bạn
    1. Chuyển code trong file jsp vào Servlet trên server (hạy bạn có sử dụng PHP trên server cho đơn giản cũng được).
    2. Sủ dụng thư viện HttpClient (thư viện java của Apache) để upload lên server.

    Theo tôi biết thì đây cũng là cách mà các dụng úng dụng di động hiện dang cài đặt.

    Bạn thử tìm hiểu xem nhe.

    ReplyDelete

Translate