แพ็คเกจ Jar Commons-Fileupload ที่จัดทำโดย Apache นั้นง่ายมากในการอัปโหลดไฟล์ เมื่อเร็ว ๆ นี้ฉันต้องใช้ servlet/jsp เพื่อทำฟังก์ชั่นการอัปโหลดรูปภาพ ฉันพบข้อมูลออนไลน์จำนวนมากซึ่งส่วนใหญ่ได้รับการแนะนำตามกรอบ Struts แม้ว่าบางคนจะแนะนำการอัปโหลดของ FilePilePilePirm แต่ตัวอย่างเหล่านั้นค่อนข้างเก่าและบางหมวดหมู่ก็ถูกทิ้งร้าง
ผ่านการวิจัยและสรุปการศึกษาฟังก์ชั่นการอัปโหลดเสร็จสมบูรณ์ในที่สุด ให้ฉันแบ่งปันกับคุณด้านล่าง
สถานการณ์กรณี
อินเทอร์เฟซการจัดการแบ็กเอนด์ไลบรารีจำเป็นต้องให้ฟังก์ชั่นของการอัปโหลดรูปภาพหนังสือและในที่สุดก็แสดงบนหน้า
ตระหนักถึงผลกระทบ
ป้อนหน้าการเพิ่มหนังสือและภาพเริ่มต้นจะปรากฏขึ้น "ยังไม่มีการพัฒนา" (ทั้งความยาวและความกว้างคือ 200px) และมีการให้ปุ่มเพื่อ "อัปโหลดรูปภาพ" ดังที่แสดงในภาพต่อไปนี้
คลิกปุ่ม "อัปโหลดรูปภาพ" และอินเตอร์เฟสการอัปโหลดจะปรากฏขึ้นผ่านหน้าต่างโหมดดังที่แสดงในรูปด้านล่าง
เลือกภาพที่ระบุผ่านปุ่ม "เรียกดู" คลิกปุ่ม "อัปโหลด" เพื่ออัปโหลด หากการอัปโหลดสำเร็จพรอมต์ที่ประสบความสำเร็จจะปรากฏขึ้น หลังจากผู้ใช้คลิก "ตกลง" ให้ปิดหน้าต่างป๊อปอัพและแสดงภาพใหม่บนหน้าโดยอัตโนมัติดังที่แสดงในรูปด้านล่าง
การใช้รหัส
① FIRST สร้างหน้าเพิ่มหนังสือ: bookadd.jsp
แท็กที่ซ่อนอยู่พร้อมหน้า ID photo_id ใช้เพื่อจัดเก็บเส้นทางภาพซึ่งสะดวกสำหรับการส่งไปยังพื้นหลังและเก็บไว้ในฐานข้อมูลและแท็ก <IMG> พร้อม ID ของ IMG_ID ใช้เพื่อแสดงภาพ รูปภาพทั้งหมดจะถูกเก็บไว้ใต้เซิร์ฟเวอร์เพื่อให้อ่านง่าย จากนั้นปุ่ม JS คีย์คลิกปุ่มเพื่อปรากฏหน้าอัปโหลดผ่านหน้าต่างโหมด เมื่อหน้าต่างโหมดโผล่ขึ้นมาการชนะตัวแปรจะถูกกำหนดซึ่งใช้เพื่อให้ได้ค่าพา ธ ภาพที่ส่งกลับโดยหน้าต่างโหมด
(หมายเหตุ: เนื่องจากปัญหาด้านความปลอดภัยรูปภาพไม่สามารถเก็บไว้ได้หากโครงการถูกปรับใช้บนเซิร์ฟเวอร์รูปภาพสามารถดูได้ภายใต้เซิร์ฟเวอร์เท่านั้นหากคุณต้องอ่านรูปภาพที่ไม่อยู่ภายใต้เซิร์ฟเวอร์ปัจจุบันคุณต้องกำหนดค่าไดเรกทอรีเสมือนจริงของเซิร์ฟเวอร์)
<html> <head> <title> เพิ่มหนังสือ </title> <script type = "text/javascript"> // เปิดฟังก์ชั่นหน้าอัปโหลด openupload () {var win = window.showModaldialog ("<%= root%>/admin/bookupload.jsp", "", " if (win! = null) {document.getElementById ("photo_id"). value = win; document.getElementById ("img_id"). src = "<%= root%>/"+win; }} </script> </head> <body> <h5> เพิ่มหนังสือ </h5> <hr/> <p> ปกหนังสือ: <label> <อินพุต type = "hidden" id = "photo_id" name = "photo" value = "images/noimg.png"> <อินพุต type = " src = "<%= root%>/images/noimg.png"> </label> </body> </html> ②สร้างหน้าอัพโหลดภาพ, bookupload.jsp
โปรดทราบว่าคุณต้องกำหนดแท็ก <base> ข้อมูลสามารถส่งคืนไปยังแบบฟอร์มพาเรนต์เมื่อปิดหน้าต่างโหมดปัจจุบัน แท็ก <form> ยังจำเป็นต้องตั้งค่าคุณสมบัติ enctype = "multipart/form-data" เพื่อให้ไฟล์ที่ส่งสามารถรับได้โดยพื้นหลัง คลิกปุ่ม "อัปโหลด" เพื่อส่งไฟล์ไปยังพื้นหลัง ไฮไลต์ที่เหลือคือการประมวลผลการอัปโหลดพื้นหลัง
<html> <head> <meta http-equiv = "content-type" content = "text/html; charset = gbk"> <meta http-equiv = "pragma" content = "no-cache"/> <span style = " #ff0000; <H5> การอัปโหลดรูปภาพ </h5> <hr/> <p style = "สี: สีแดง"> $ {requestscope.errormsg} </p> <form id = "form1" name = "form1" action = "<%= root%>/bookserlet? type = bookupload" 3M! </div> <div> <อินพุต type = "file" name = "file_upload"/> </div> <div> <อินพุต type = "submit" value = "upload"/> </div> ③สร้าง servlet ธรรมดามีเพียงรหัสคีย์บางส่วนเท่านั้นที่ให้ไว้ด้านล่าง
ส่วนรหัสสีแดงคือรหัสคีย์ที่อัปโหลดและส่วนอื่น ๆ จะถูกใช้เป็นการปรุงแต่ง ทำสามขั้นตอนเหล่านี้และการอัปโหลดอย่างง่ายจะสำเร็จ
Public Class BookServlet ขยาย httpservlet {private String uploadPath = "eshop/upload/"; // ไดเรกทอรีสำหรับการอัปโหลดไฟล์สตริงส่วนตัว temppath = "eshop/uploadtmp/"; // ไดเรกทอรีไฟล์ชั่วคราวสตริงส่วนตัวเซิร์ฟเวอร์เซิร์ฟเวอร์ = null; private int sizemax = 3; // ภาพสูงสุดขีด จำกัด สูงสุดสตริงส่วนตัว [] fileType = สตริงใหม่ [] {". jpg", ". gif", ". bmp", ". png", ". jpeg", ". ico"}; โมฆะสาธารณะ DOGET (คำขอ HTTPSERVLETREQUEST, การตอบสนอง httpservletResponse) พ่น servletexception, ioexception {serverpath = getServletContext (). getRealPath ("/") แทนที่ ("//", "/"); // ดำเนินการเมื่อ servlet เริ่มต้น หากไม่มีไดเรกทอรีไฟล์ที่อัพโหลดจะมีอยู่โดยอัตโนมัติจะสร้างถ้า (! ไฟล์ใหม่ (ServerPath+UploadPath) .isdirectory ()) {ไฟล์ใหม่ (ServerPath+UploadPath) .MkDirs (); } if (! ไฟล์ใหม่ (ServerPath+Temppath) .isdirectory ()) {ไฟล์ใหม่ (ServerPath+Temppath) .mkdirs (); } <span style = "color: #ff0000;"> diskfileitemfactory โรงงาน = ใหม่ diskfileitemfactory (); </span> โรงงาน Setsizethreshold (5*1024); // สูงสุด Cache Factory.SetRepository (ไฟล์ใหม่ (ServerPath+Temppath)); // ไดเรกทอรีไฟล์ชั่วคราว <span style = "สี: #ff0000;"> servletfileupload อัปโหลด = ใหม่ servletFileUpload (โรงงาน); ลอง {<span style = "color: #ff0000;"> list <fileItem> item = upload.parserequest (คำขอ); </span> // รับรายการไฟล์ทั้งหมดสำหรับ (รายการ fileItem: รายการ) {// รับชื่อไฟล์ชื่อไฟล์นี้ </span filenname item.getName (). ToLowerCase (); if (filename.endswith (fileType [0]) || filename.endswith (fileType [1]) || filename.endswith (fileType [2]) || filename.endswith (fileType [3]) || filename.endswith uuid.randomuuid (). toString (); filePath = ServerPath+UploadPath+UUID+filename.substring (filename.lastindexof (".")); <span style = "สี: #ff0000;"> item.write (ไฟล์ใหม่ (filepath)); </span> printwriter pw = response.getWriter (); pw.write ("<script> การแจ้งเตือน ('อัปโหลดสำเร็จ'); window.returnvalue = '"+uploadpath+uuid+filename.substring (filename.lastindexof ("."))+"'; pw.flush (); pw.close (); } else {request.setAttribute ("errormsg", "การอัปโหลดล้มเหลวโปรดยืนยันว่ามีไฟล์ที่อัปโหลดอยู่และเป็นรูปภาพ!"); request.getRequestDispatcher ("/admin/bookupload.jsp"). forward (คำขอ, การตอบกลับ); }}}} catch (Exception E) {E.printStackTrace (); request.setAttribute ("errormsg", "การอัปโหลดล้มเหลวโปรดยืนยันว่าขนาดไฟล์ที่อัปโหลดไม่เกิน"+sizemax+"m"); request.getRequestDispatcher ("/admin/bookupload.jsp"). forward (คำขอ, การตอบกลับ); -ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น