การอัพโหลดและดาวน์โหลดไฟล์ JSP

⚡ สรุปอย่างชาญฉลาด

การอัปโหลดและดาวน์โหลดไฟล์ใน JSP เป็นการดำเนินการรับและส่งข้อมูลหลักที่ช่วยให้เว็บแอปพลิเคชันรับไฟล์จากผู้ใช้และส่งไฟล์กลับไปยังผู้ใช้ได้ เอกสารนี้จะอธิบายขั้นตอนทั้งสองโดยใช้ฟอร์มแอ็กชัน JSP, Apache Commons FileUpload และคลาสเซิร์ฟเล็ต พร้อมโค้ดตัวอย่างที่ใช้งานได้จริง

  • 📤 ข้อมูลพื้นฐานเกี่ยวกับการอัปโหลด: สำหรับการอัปโหลดไฟล์ทุกครั้ง ให้ใช้เมธอด POST และตั้งค่า enctype เป็น multipart/form-data
  • 🧩 อาปาเช่คอมมอนส์: DiskFileItemFactory และ ServletFileUpload จะแยกคำขอแบบ multipart ออกเป็นรายการไฟล์
  • 🗂️ การจัดการเซิร์ฟเล็ต: เมธอด doPost จะวนซ้ำรายการไฟล์และเขียนแต่ละรายการลงในโฟลเดอร์เป้าหมาย
  • 📥 ดาวน์โหลด Flow: เซิร์ฟเล็ตจะสตรีมไฟล์โดยใช้ FileInputStream และส่วนหัว Content-Disposition
  • ⚙️ การกำหนดค่า: ต้องตั้งค่าเส้นทางไฟล์ ขีดจำกัดขนาด และประเภทเนื้อหาก่อนทำการอ่านหรือเขียนข้อมูล

การอัพโหลดและดาวน์โหลดไฟล์ JSP

การอัพโหลดไฟล์ JSP

  • เราสามารถอัพโหลดไฟล์ใด ๆ โดยใช้ JSP
  • อาจเป็นไฟล์ข้อความ ไฟล์ไบนารี ไฟล์รูปภาพ หรือเอกสารอื่นๆ
  • ในกรณีที่อัปโหลดไฟล์ จะมีการใช้วิธี POST เท่านั้น ไม่ใช่วิธี GET
  • ควรตั้งค่าแอตทริบิวต์ Enctype เป็น multipart/form-data

ตัวอย่าง: การใช้การกระทำ

ในตัวอย่างนี้ เรากำลังอัปโหลดไฟล์โดยใช้อ็อบเจ็กต์ IO

Action_file.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Guru File</title>
</head>
<body>
<a>Guru File Upload:</a>
Select file: <br />
<form action="action_file_upload.jsp" method="post"
                        enctype="multipart/form-data">
<input type="file" name="file" size="50" />
<br />
<input type="submit" value="Upload File" />
</form>
</body>
</html>

Action_file_upload.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ page import="java.io.*,java.util.*, javax.servlet.*" %>
<%@ page import="javax.servlet.http.*" %>
<%@ page import="org.apache.commons.fileupload.*" %>
<%@ page import="org.apache.commons.fileupload.disk.*" %>
<%@ page import="org.apache.commons.fileupload.servlet.*" %>
<%@ page import="org.apache.commons.io.output.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Guru File Upload</title>
</head>
<body>
<%
   File file ;
   int maxFileSize = 5000 * 1024;
   int maxMemSize = 5000 * 1024;
   String filePath = "E:/guru99/data";

   String contentType = request.getContentType();
   if ((contentType.indexOf("multipart/form-data") >= 0)) {

      DiskFileItemFactory factory = new DiskFileItemFactory();
      factory.setSizeThreshold(maxMemSize);
      factory.setRepository(new File("c:\\temp"));
      ServletFileUpload upload = new ServletFileUpload(factory);
      upload.setSizeMax( maxFileSize );
      try{
         List fileItems = upload.parseRequest(request);
         Iterator i = fileItems.iterator();
         out.println("<html>");
         out.println("<body>");
         while ( i.hasNext () )
         {
            FileItem fi = (FileItem)i.next();
            if ( !fi.isFormField () )  {
                String fieldName = fi.getFieldName();
                String fileName = fi.getName();
                boolean isInMemory = fi.isInMemory();
                long sizeInBytes = fi.getSize();
                file = new File( filePath + "yourFileName") ;
                fi.write( file ) ;
                out.println("Uploaded Filename: " + filePath + fileName + "<br>");
            }
         }
         out.println("</body>");
         out.println("</html>");
      }catch(Exception ex) {
         System.out.println(ex);
      }
   }else{
      out.println("<html>");
      out.println("<body>");
      out.println("<p>No file uploaded</p>");
      out.println("</body>");
      out.println("</html>");
   }
%>
</body>
</html>

คำอธิบายของรหัส:

Action_file.jsp

Code บรรทัดที่ 12-18: ในที่นี้เรากำลังสร้างฟอร์มที่มีช่องสำหรับป้อนไฟล์ ซึ่งจะใช้ในการอัปโหลดไฟล์ไปยังเซิร์ฟเวอร์ และการดำเนินการจะถูกส่งต่อไปยังไฟล์ action_file_upload.jsp

Action_file_upload.jsp

Code 20 แนว: ในที่นี้เรากำลังระบุพาธของไฟล์ไปยังพาธที่เฉพาะเจาะจง

Code บรรทัดที่ 23-38: ในขั้นตอนนี้ เราจะตรวจสอบว่าประเภทเนื้อหาเป็นแบบ multipart/form-data หรือไม่ ถ้าใช่ เนื้อหาจะเป็นประเภทไฟล์ และจะถูกอ่าน หลังจากอ่านไฟล์แล้ว ข้อมูลจะถูกเขียนลงในไฟล์ชั่วคราว จากนั้นไฟล์ชั่วคราวจะถูกแปลงเป็นไฟล์หลัก

เมื่อคุณรันโค้ดข้างต้น คุณจะได้ผลลัพธ์ต่อไปนี้:

การอัพโหลดไฟล์ JSP

Output:

เรากำลังอัปโหลดไฟล์โดยใช้ตัวเลือกปุ่มเลือกไฟล์ และปุ่มอัปโหลดไฟล์จะอัปโหลดไฟล์ไปยังเซิร์ฟเวอร์ตามเส้นทางที่ระบุไว้

ตัวอย่าง: การใช้การดำเนินการ JSP

ในตัวอย่างนี้ เราจะอัปโหลดไฟล์โดยใช้การทำงานของ JSP เราจะใช้ฟอร์มที่มีปุ่ม "อัปโหลด" และเมื่อคุณคลิกที่ปุ่มอัปโหลด ไฟล์จะถูกอัปโหลด

กำลังอัพโหลด_1.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Guru Uploading File</title>
</head>
<body>
File: <br />
<form action="guru_upload" method="post"
                        enctype="multipart/form-data">
<input type="file" name="guru_file" size="50" />
<br />
<input type="submit" value="Upload" />
</form>
</body>
</html>

คำอธิบายของรหัส:

Code บรรทัดที่ 11-12: ในที่นี้เรากำลังใช้ฟอร์มที่มีแอ็กชันบนเซิร์ฟเล็ต guru_upload ซึ่งจะส่งข้อมูลผ่านเมธอด POST นอกจากนี้ คุณสมบัติ enctype ยังระบุวิธีการเข้ารหัสและส่งข้อมูลฟอร์มไปยังเซิร์ฟเวอร์ ซึ่งใช้เฉพาะกับเมธอด POST เท่านั้น ในที่นี้เราตั้งค่าเป็น multipart/form-data ซึ่งใช้สำหรับไฟล์ (เนื่องจากข้อมูลจะมีขนาดใหญ่)

Code 13 แนว: ในที่นี้ เรากำหนดองค์ประกอบ guru_file โดยระบุประเภทเป็นไฟล์และกำหนดขนาดเป็น 50

Code 15 แนว: นี่คือปุ่มส่งข้อมูลที่มีชื่อว่า “อัปโหลด” ซึ่งจะเรียกใช้เซิร์ฟเล็ตประมวลผลคำขอ และไฟล์จะถูกอ่านและเขียนลงในเซิร์ฟเล็ตนั้น

Guru_upload.java

package demotest;

import java.io.File;
import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

public class guru_upload extends HttpServlet {
	private static final long serialVersionUID = 1L;

    public guru_upload() {
        super();
        // TODO Auto-generated constructor stub
    }
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		        if(ServletFileUpload.isMultipartContent(request)){
		            try {
		                List <FileItem> multiparts = new ServletFileUpload(new DiskFileItemFactory()).parseRequest(request);
		                for(FileItem item : multiparts){
		                    if(!item.isFormField()){
		                        String name = new File(item.getName()).getName();
		                        item.write( new File("c:/guru/upload" + File.separator + name));
		                    }
		                }
		               //File uploaded successfully
		               request.setAttribute("gurumessage", "File Uploaded Successfully");
		            } catch (Exception ex) {
		               request.setAttribute("gurumessage", "File Upload Failed due to " + ex);
		            }
		        }else{

		            request.setAttribute("gurumessage","No File found");
 }
		        request.getRequestDispatcher("/result.jsp").forward(request, response);

		    }


}

คำอธิบายของรหัส:

Code บรรทัดที่ 12-14: ในส่วนนี้ เราจะต้องนำเข้าไลบรารี org.apache.commons เข้าไปในการตั้งค่าโค้ด และเราจะต้องนำเข้าคลาส fileupload จากไลบรารี org.apache.commons ด้วย

Code 23 แนว: ต่อไปนี้คือเมธอด doPost() ซึ่งจะถูกเรียกใช้เมื่อเราส่งเมธอด POST ใน JSP โดยเมธอดนี้จะรับอ็อบเจ็กต์ request และ response เป็นพารามิเตอร์

Code 26 แนว: ในที่นี้เรากำลังสร้างอ็อบเจ็กต์ของคลาส ServletFileUpload จากแพ็กเกจ fileUpload ของไลบรารี org.apache.commons ซึ่งจะตรวจสอบว่ามีอ็อบเจ็กต์ไฟล์ใด ๆ ใน JSP หรือไม่ หากพบ อ็อบเจ็กต์ไฟล์เหล่านั้นจะถูกดึงมาจากคำขอ

Code บรรทัดที่ 27-32: เราจะวนลูปตรวจสอบจำนวนไฟล์โดยการตรวจสอบจำนวนรายการไฟล์ที่มีอยู่ในอ็อบเจ็กต์ multiparts ซึ่งเป็นอ็อบเจ็กต์รายการ (ถ้าเราอัปโหลดไฟล์มากกว่าหนึ่งไฟล์) และบันทึกไฟล์นั้นลงในโฟลเดอร์ c:/guru/upload โดยใช้ชื่อไฟล์ที่กำหนดไว้ เราจะเขียนไฟล์โดยใช้วิธี write ของอ็อบเจ็กต์ไฟล์ลงในโฟลเดอร์ที่กล่าวถึง

Code 34 แนว: หากไม่มีข้อยกเว้นใดๆ เราจะกำหนดแอตทริบิวต์ในคำขอเป็น gurumessage โดยมีค่าเป็น “อัปโหลดไฟล์สำเร็จแล้ว”

Code บรรทัดที่ 35-36: หากเกิดข้อผิดพลาด เราจะแสดงข้อความว่า “การอัปโหลดไฟล์ล้มเหลว”

Code 40 แนว: หากไม่พบไฟล์ ระบบจะแสดงข้อความว่า “ไม่พบไฟล์”

Code 42 แนว: ส่งต่อคำขอโดยใช้ object requestdispatcher ไปยัง result.jsp พร้อมด้วย object request และ response

ผลลัพธ์.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Guru Result</title>
</head>
<body>
<% String msg = (String)request.getAttribute("message");
   out.println(msg);
%>
</body>
</html>

คำอธิบายของรหัส:

Code 10 แนว: ในที่นี้ เรากำลังดึงแอตทริบิวต์จากอ็อบเจ็กต์คำขอที่มีค่าเป็น gurumessage มาเก็บไว้ในอ็อบเจ็กต์สตริง

Code 11 แนว: ที่นี่เรากำลังพิมพ์ข้อความนั้น

เมื่อเรารันโค้ดข้างต้น เราจะได้ผลลัพธ์ดังต่อไปนี้:

Output:

เราจะได้รับแบบฟอร์มที่มีช่องให้เลือกไฟล์จากไดเร็กทอรี เมื่อเลือกไฟล์แล้ว เราต้องคลิกที่ปุ่มอัปโหลด

การอัพโหลดไฟล์โดยใช้การดำเนินการ JSP

เมื่อคลิกปุ่มอัปโหลดแล้ว เราจะได้รับข้อความว่าไฟล์ถูกอัปโหลดสำเร็จแล้ว

การอัพโหลดไฟล์โดยใช้การดำเนินการ JSP

จากแผนภาพด้านล่าง เราจะเห็นว่าไฟล์ได้ถูกอัปโหลดไปยังโฟลเดอร์ c:/guru/upload แล้ว

การอัพโหลดไฟล์โดยใช้การดำเนินการ JSP

ดาวน์โหลดไฟล์ JSP

ในตัวอย่างนี้ เราจะดาวน์โหลดไฟล์จากไดเร็กทอรีโดยคลิกที่ปุ่ม

กำลังดาวน์โหลด_1.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Downloading Guru Example</title>
</head>
<body>
Guru Downloading File<a href="guru_download">Download here!!!</a>
</body>
</html>

คำอธิบายของรหัส:

Code 10 แนว: ในที่นี้เราได้ให้ลิงก์สำหรับดาวน์โหลดไฟล์จากโฟลเดอร์ c:/guru/upload โดยใช้เซิร์ฟเล็ต guru_download

Guru_download.java

package demotest;

import java.io.FileInputStream;
import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class guru_download
 */
public class guru_download extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html");
		PrintWriter out = response.getWriter();
		String gurufile = "test.txt";
		String gurupath = "c:/guru/upload/";
		response.setContentType("APPLICATION/OCTET-STREAM");
		response.setHeader("Content-Disposition", "attachment; filename=\""
				+ gurufile + "\"");

		FileInputStream fileInputStream = new FileInputStream(gurupath
				+ gurufile);

		int i;
		while ((i = fileInputStream.read()) != -1) {
			out.write(i);
		}
		fileInputStream.close();
		out.close();
	}


	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
	}

}

คำอธิบายของรหัส:

Code บรรทัดที่ 3-5: ในที่นี้เรากำลังนำเข้า FileInputStream, IOException และ PrintWriter จากแพ็กเกจ java.io

Code 15 แนว: เรากำลังกำหนด guru_download เซิร์ฟเล็ต ซึ่งขยาย HttpServlet

Code 18 แนว: เนื่องจากเราได้กำหนด href ไว้แล้ว ซึ่งจะถูกล้อมรอบด้วย URLดังนั้น เมธอด GET จะถูกประมวลผล (เมธอด doGet จะถูกเรียกในเซิร์ฟเล็ต) ซึ่งรวมถึงอ็อบเจ็กต์คำขอและคำตอบด้วย

Code บรรทัดที่ 19-20: เรากำลังกำหนดประเภทเนื้อหาในอ็อบเจ็กต์การตอบกลับ และดึงอ็อบเจ็กต์ผู้เขียนจากคำตอบนั้นด้วย

Code บรรทัดที่ 21-22: กำหนดตัวแปรชื่อ gurufile โดยมีค่าเป็น test.txt และกำหนด gurupath เป็น c:/guru/upload/

Code บรรทัดที่ 23-25: เรากำหนดประเภทเนื้อหาโดยใช้ object response และใช้เมธอด setHeader ซึ่งจะกำหนดส่วนหัวลงใน object response โดยใช้ชื่อไฟล์ที่อัปโหลดมา

Code บรรทัดที่ 27-28: เรากำลังสร้าง FileInputStream ซึ่งเราจะเพิ่ม gurupath+gurufile เข้าไป

Code บรรทัดที่ 31-33: ที่นี่เราได้นำเอา ในขณะที่วนซ้ำ ซึ่งจะทำงานไปเรื่อยๆ จนกว่าจะอ่านไฟล์เสร็จ ดังนั้นเราจึงกำหนดเงื่อนไขเป็น != -1 ในเงื่อนไขนี้ เรากำลังเขียนข้อมูลโดยใช้ object printwriter out

เมื่อคุณรันโค้ดข้างต้น คุณจะได้รับผลลัพธ์ดังต่อไปนี้:

Output:

กำลังดาวน์โหลดไฟล์

เราต้องคลิกที่ไฟล์ downloading_1.jsp แล้วเราจะได้รับไฮเปอร์ลิงก์ที่มีข้อความว่า “ดาวน์โหลดที่นี่” เมื่อคุณคลิกที่ไฮเปอร์ลิงก์นี้ ไฟล์จะถูกดาวน์โหลดเข้าสู่ระบบ

คำถามที่พบบ่อย

ใช่แล้ว ผู้ช่วย AI สามารถสร้างโครงสร้างพื้นฐานของเซิร์ฟเล็ตและฟอร์ม JSP สำหรับการอัปโหลดและดาวน์โหลดไฟล์ เพิ่มตรรกะ Apache Commons FileUpload และแนะนำการตรวจสอบความถูกต้องได้ อย่างไรก็ตาม คุณควรทดสอบโค้ดและตรวจสอบเส้นทางไฟล์และข้อจำกัดด้านขนาดไฟล์ด้วย

ใช่แล้ว โปรแกรมสแกนที่ใช้ AI สามารถตรวจสอบไฟล์ที่อัปโหลดเพื่อหามัลแวร์ ประเภทไฟล์ที่ไม่คาดคิด หรือไฟล์ที่มีขนาดใหญ่เกินไป ก่อนที่ไฟล์เหล่านั้นจะถูกจัดเก็บ ซึ่งจะเพิ่มระดับการป้องกันอีกชั้นหนึ่ง แม้ว่าการตรวจสอบประเภทและขนาดไฟล์ฝั่งเซิร์ฟเวอร์ยังคงมีความสำคัญอยู่ก็ตาม

การเข้ารหัสแบบ multipart/form-data จะแบ่งคำขอออกเป็นส่วนๆ เพื่อให้ได้ข้อมูลไฟล์ไบนารี transmitted ยังคงอยู่ครบถ้วน หากไม่มีมัน เบราว์เซอร์จะส่งเฉพาะชื่อไฟล์ไปยังเซิร์ฟเวอร์เท่านั้น ไม่ใช่เนื้อหาไฟล์จริง

Apache Commons FileUpload ร่วมกับ Commons IO เป็นเครื่องมือที่ใช้กันอย่างแพร่หลาย โดยจะวิเคราะห์คำขอแบบ multipart แสดง FileItem แต่ละรายการ และเขียนเนื้อหาที่อัปโหลดไปยังไดเร็กทอรีที่เลือกบนเซิร์ฟเวอร์

สรุปโพสต์นี้ด้วย: