JSP สามารถใช้กับแท็กรูปแบบ HTML เพื่อให้ผู้ใช้สามารถอัปโหลดไฟล์ไปยังเซิร์ฟเวอร์ได้ ไฟล์ที่อัปโหลดอาจเป็นไฟล์ข้อความหรือไบนารี หรือไฟล์รูปภาพ หรือเป็นเอกสารก็ได้
การสร้างแบบฟอร์มอัพโหลดไฟล์
ให้เราเข้าใจวิธีการสร้างแบบฟอร์มการอัปโหลดไฟล์ โค้ด HTML ต่อไปนี้จะสร้างแบบฟอร์มผู้อัปโหลด ต่อไปนี้เป็นประเด็นสำคัญที่ควรจดบันทึกไว้ -
-
แบบฟอร์ม วิธีการ ควรตั้งค่าแอตทริบิวต์เป็น POST เมธอดและเมธอด GET ไม่สามารถใช้ได้
-
แบบฟอร์ม enctype แอตทริบิวต์ควรตั้งค่าเป็น multipart/form-data .
-
แบบฟอร์ม การกระทำ ควรตั้งค่าแอตทริบิวต์เป็นไฟล์ JSP ซึ่งจะจัดการการอัปโหลดไฟล์ที่เซิร์ฟเวอร์ส่วนหลัง ตัวอย่างต่อไปนี้ใช้ uploadFile.jsp ไฟล์โปรแกรมเพื่ออัพโหลดไฟล์
-
ในการอัปโหลดไฟล์เดียว คุณควรใช้ . ไฟล์เดียว แท็กที่มีแอตทริบิวต์ type ="file" . หากต้องการอนุญาตให้อัปโหลดไฟล์ได้หลายไฟล์ ให้ใส่แท็กอินพุตมากกว่าหนึ่งแท็กที่มีค่าต่างกันสำหรับแอตทริบิวต์ชื่อ เบราว์เซอร์เชื่อมโยงปุ่มเรียกดูกับแต่ละปุ่ม
ตัวอย่าง
<html> <head> <title>File Uploading Form</title> </head> <body> <h3>File Upload:</h3> Select a file to upload: <br /> <form action = "UploadServlet" method = "post" enctype = "multipart/form-data"> <input type = "file" name = "file" size = "50" /> <br /> <input type = "submit" value = "Upload File" /> </form> </body> </html>
ซึ่งจะแสดงผลดังต่อไปนี้ ขณะนี้คุณสามารถเลือกไฟล์จากเครื่องพีซี และเมื่อผู้ใช้คลิก "อัปโหลดไฟล์" แบบฟอร์มจะถูกส่งไปพร้อมกับไฟล์ที่เลือก -
ผลลัพธ์
File Upload Select a file to upload
หมายเหตุ − แบบฟอร์มด้านบนเป็นเพียงรูปแบบจำลองและใช้งานไม่ได้ คุณควรลองใช้โค้ดด้านบนที่เครื่องของคุณเพื่อให้ใช้งานได้
การเขียนสคริปต์ JSP แบ็กเอนด์
ให้เรากำหนดตำแหน่งที่จะเก็บไฟล์ที่อัพโหลด คุณสามารถฮาร์ดโค้ดนี้ในโปรแกรมของคุณ หรือสามารถเพิ่มชื่อไดเร็กทอรีนี้โดยใช้การกำหนดค่าภายนอก เช่น context-param องค์ประกอบใน web.xml ดังต่อไปนี้ -
<web-app> .... <context-param> <description>Location to store uploaded file</description> <param-name>file-upload</param-name> <param-value> c:\apache-tomcat-5.5.29\webapps\data\ </param-value> </context-param> .... </web-app>
ต่อไปนี้เป็นซอร์สโค้ดสำหรับ UploadFile.jsp . สิ่งนี้สามารถจัดการการอัปโหลดหลายไฟล์พร้อมกัน ให้เราพิจารณาสิ่งต่อไปนี้ก่อนดำเนินการอัปโหลดไฟล์
-
ตัวอย่างต่อไปนี้ขึ้นอยู่กับ FileUpload; ตรวจสอบให้แน่ใจว่าคุณมี commons-fileupload.x.x.jar เวอร์ชันล่าสุด ไฟล์ใน classpath ของคุณ คุณสามารถดาวน์โหลดได้จาก https://commons.apache.org/fileupload/
-
FileUpload ขึ้นอยู่กับ Commons IO; ตรวจสอบให้แน่ใจว่าคุณมี commons-io-x.x.jar . เวอร์ชันล่าสุด ไฟล์ใน classpath ของคุณ คุณสามารถดาวน์โหลดได้จาก https://commons.apache.org/io/
-
ขณะทดสอบตัวอย่างต่อไปนี้ คุณควรอัปโหลดไฟล์ที่มีขนาดน้อยกว่า maxFileSize มิฉะนั้น ไฟล์จะไม่ถูกอัปโหลด
-
ตรวจสอบให้แน่ใจว่าคุณได้สร้างไดเร็กทอรี c:\temp และ c:\apache-tomcat5.5.29\webapps\data ล่วงหน้าครับ
<%@ 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.*" %> <% File file ; int maxFileSize = 5000 * 1024; int maxMemSize = 5000 * 1024; ServletContext context = pageContext.getServletContext(); String filePath = context.getInitParameter("file-upload"); // Verify the content type String contentType = request.getContentType(); if ((contentType.indexOf("multipart/form-data") >= 0)) { DiskFileItemFactory factory = new DiskFileItemFactory(); // maximum size that will be stored in memory factory.setSizeThreshold(maxMemSize); // Location to save data that is larger than maxMemSize. factory.setRepository(new File("c:\\temp")); // Create a new file upload handler ServletFileUpload upload = new ServletFileUpload(factory); // maximum file size to be uploaded. upload.setSizeMax( maxFileSize ); try { // Parse the request to get file items. List fileItems = upload.parseRequest(request); // Process the uploaded file items Iterator i = fileItems.iterator(); out.println("<html>"); out.println("<head>"); out.println("<title>JSP File upload</title>"); out.println("</head>"); out.println("<body>"); while ( i.hasNext () ) { FileItem fi = (FileItem)i.next(); if ( !fi.isFormField () ) { // Get the uploaded file parameters String fieldName = fi.getFieldName(); String fileName = fi.getName(); boolean isInMemory = fi.isInMemory(); long sizeInBytes = fi.getSize(); // Write the file if( fileName.lastIndexOf("\\") >= 0 ) { file = new File( filePath + fileName.substring( fileName.lastIndexOf("\\"))) ; } else { file = new File( filePath + fileName.substring(fileName.lastIndexOf("\\")+1)) ; } 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("<head>"); out.println("<title>Servlet upload</title>"); out.println("</head>"); out.println("<body>"); out.println("<p>No file uploaded</p>"); out.println("</body>"); out.println("</html>"); } %>
ตอนนี้ให้ลองอัปโหลดไฟล์โดยใช้รูปแบบ HTML ที่คุณสร้างไว้ด้านบน เมื่อคุณลอง https://localhost:8080/UploadFile.htm มันจะแสดงผลดังต่อไปนี้ ซึ่งจะช่วยให้คุณอัปโหลดไฟล์ใดๆ จากเครื่องในเครื่องของคุณ
File Upload Select a file to upload
หากสคริปต์ JSP ของคุณทำงานได้ดี ไฟล์ของคุณควรอัปโหลดใน c:\apache-tomcat5.5.29\webapps\data\ ไดเรกทอรี