jQuery Uploadify + Apache Fileupload ตัวอย่างการอัพโหลดไฟล์แบบอะซิงโครนัส
1. คุณสามารถจำกัดขนาดและประเภทของไฟล์ที่อัพโหลดได้ ตามทฤษฎีแล้ว สามารถอัพโหลดไฟล์ประเภทใดก็ได้ (คุณสามารถกำหนดค่าตาม API)
2. Apache commons-fileupload-1.3.1.jar ถูกใช้เป็นชุดเครื่องมืออัพโหลดในเบื้องหลัง ตัวอย่างนี้รองรับการอัพโหลดหลายไฟล์ในคราวเดียว
3. สามารถระบุไดเร็กทอรีอัพโหลดไฟล์ได้โดยพลการ โปรดกำหนดค่าใน web.xml
สำหรับรายละเอียดเกี่ยวกับ Uploadify API โปรดดู http://www.uploadify.com/documentation/
FileUploadServlet
คัดลอกรหัสรหัสดังต่อไปนี้:
แพ็คเกจ com.xiaoxing.upload;
นำเข้า java.io.File;
นำเข้า java.io.IOException;
นำเข้า java.io.PrintWriter;
นำเข้า java.io.UnsupportedEncodingException;
นำเข้า java.text.SimpleDateFormat;
นำเข้า java.util.Date;
นำเข้า java.util.Iterator;
นำเข้า java.util.List;
นำเข้า java.util.UUID;
นำเข้า javax.servlet.ServletException;
นำเข้า javax.servlet.http.HttpServlet;
นำเข้า javax.servlet.http.HttpServletRequest;
นำเข้า javax.servlet.http.HttpServletResponse;
นำเข้า org.apache.commons.fileupload.FileItem;
นำเข้า org.apache.commons.fileupload.disk.DiskFileItemFactory;
นำเข้า org.apache.commons.fileupload.servlet.ServletFileUpload;
-
* <h1>อัปโหลดไฟล์ Apache Fileupload (2014-5-3)</h1>
* <p>1. หากคุณสนใจตัวอย่างนี้และต้องการทราบข้อมูลเพิ่มเติม ยินดีต้อนรับสู่ชุมชนการเรียนรู้ออนไลน์ Java Private School (329232140)</p>
* <p>2. ตัวอย่างนี้สามารถย้ายไปยังโครงการจริงของคุณได้โดยมีการแก้ไขเล็กน้อย </p>
-
FileUploadServlet คลาสสาธารณะขยาย HttpServlet {
serialVersionUID ยาวสุดท้ายคงที่ส่วนตัว = 7579265950932321867L;
//ตั้งค่าไดเร็กทอรีอัพโหลดไฟล์เริ่มต้น (หากคุณไม่ได้กำหนดค่าไว้ใน web.xml)
สตริงส่วนตัว uploadDir = "c:/"; // ไดเร็กทอรีอัพโหลดไฟล์
private String tempUploadDir = "c:/"; // ไดเร็กทอรีที่เก็บไฟล์ไว้ชั่วคราว (ผู้ฟังจะลบโดยอัตโนมัติหลังจากเซสชันถูกทำลาย)
-
* (ไม่ใช่ Javadoc)
* @ดู javax.servlet.GenericServlet#init()
* หากมีการกำหนดค่าไดเร็กทอรีการอัพโหลดไฟล์ใน web.xml มันจะถูกใช้ก่อนเพื่อพิจารณาว่าไดเร็กทอรีไฟล์นั้นมีอยู่หรือไม่ ให้สร้างมันขึ้นมา
-
@แทนที่
โมฆะสาธารณะ init() พ่น ServletException {
// รับไดเร็กทอรีฮาร์ดดิสก์จริงซึ่งเป็นที่ตั้งของโปรเจ็กต์นี้
เส้นทางสตริง = getClass().getProtectionDomain().getCodeSource().getLocation().getPath();
path = path.substring(0, path.indexOf("WEB-INF"));
// ตรวจสอบว่าเป้าหมายมีอยู่หรือไม่ สร้างมันขึ้นมาหากไม่มีอยู่
สตริง uploadDir = path.concat(this.getInitParameter("uploadDir"));
สตริง tempUploadDir = path.concat(this.getInitParameter("tempUploadDir"));
ไฟล์ f_uploadDir = ไฟล์ใหม่ (uploadDir);
ไฟล์ f_tempUploadDir = ไฟล์ใหม่ (tempUploadDir);
ถ้า (!f_uploadDir.exists()) {
f_uploadDir.mkdirs();
-
ถ้า (!f_tempUploadDir.exists()) {
f_tempUploadDir.mkdirs();
-
//กำหนดค่าให้กับตัวแปร
this.uploadDir = uploadDir;
this.tempUploadDir = tempUploadDir;
-
-
* (ไม่ใช่ Javadoc)
* @ดู javax.servlet.http.HttpServlet#doGet(javax.servlet.http.HttpServletRequest, javax.servlet.http.HttpServletResponse)
* ไม่ยอมรับข้อมูลที่ส่งโดยวิธี get และส่งคืนรหัสสถานะความล้มเหลวในการอัปโหลด
-
@แทนที่
โมฆะที่ได้รับการป้องกัน doGet (คำขอ HttpServletRequest, การตอบสนอง HttpServletResponse) พ่น ServletException, IOException {
this.setResponse(ตอบกลับ);
PrintWriter ออก = response.getWriter();
out.print("{/"error/":/"-1/""); // วิธีการส่งที่ผิดกฎหมาย
-
-
* (ไม่ใช่ Javadoc)
* @ดู javax.servlet.http.HttpServlet#doPost(javax.servlet.http.HttpServletRequest, javax.servlet.http.HttpServletResponse)
* โดยปกติแล้วคำขออัปโหลดไฟล์จะส่งผ่านทาง POST
-
@แทนที่
โมฆะที่ได้รับการป้องกัน doPost (คำขอ HttpServletRequest, การตอบสนอง HttpServletResponse) พ่น ServletException, IOException {
this.setResponse(response); //ตั้งค่าประเภทการตอบสนองสำหรับการแยกวิเคราะห์ส่วนหน้า
PrintWriter ออก = response.getWriter();
ผลลัพธ์สตริง = "";
พยายาม {
// ตรวจสอบว่านี่เป็นคำขออัปโหลดไฟล์หรือไม่
บูลีน isMultipart = ServletFileUpload.isMultipartContent (คำขอ);
ถ้า (isMultipart) {
โรงงาน DiskFileItemFactory = ใหม่ DiskFileItemFactory(); // สร้างรายการไฟล์ตามดิสก์จากโรงงาน
Factory.setRepository(ไฟล์ใหม่(tempUploadDir)); // กำหนดค่าพื้นที่เก็บข้อมูล (เมื่อตรวจสอบตำแหน่งชั่วคราวที่ปลอดภัย)
ServletFileUpload upload = new ServletFileUpload(factory); // สร้างตัวจัดการการอัพโหลดไฟล์ใหม่
upload.setSizeMax(1024 * 1024 * 100); // ตั้งค่าขีดจำกัดขนาดโดยรวมที่ต้องการ (แนะนำให้ตั้งค่าส่วนหน้าและส่วนหลังแยกกัน เนื่องจากมีการใช้ปลั๊กอินที่แตกต่างกันในส่วนหน้าและส่วนหลัง)
รายการ <FileItem> items = upload.parseRequest(request); // แยกวิเคราะห์คำขอ
Iterator<FileItem> iter = items.iterator(); // ประมวลผลรายการที่อัปโหลด
ในขณะที่ (iter.hasNext()) { //หากอัปโหลดหลายไฟล์ในคราวเดียว ไฟล์เหล่านั้นจะถูกบันทึกแยกกันที่นี่
รายการ FileItem = iter.next();
if (!item.isFormField()) { // กรองฟิลด์ที่ไม่ใช่ประเภทไฟล์ในแบบฟอร์ม
if (!"".equals(item.getName())) { // กรองอินพุตประเภทที่ไม่ใช่ไฟล์
String s_name = item.getName(); // รับชื่อไฟล์ต้นฉบับ
ตำแหน่ง int = s_name.lastIndexOf(".");
String s_fileType = s_name.substring(position, s_name.length()); // รับส่วนต่อท้ายไฟล์
วันที่ของสตริง = new SimpleDateFormat("yyyyMMdd").format(new Date());
สตริง s = uploadDir.concat("/").concat(date).concat("/");
//บันทึกไฟล์ในไดเร็กทอรีตามวันที่ที่นี่
ไฟล์ sf = ไฟล์ใหม่;
ถ้า (!sf.exists()) {
sf.mkdirs();
-
สตริง s_filePath = s.concat(UUID.randomUUID().toString()).concat(s_fileType);
เส้นทางไฟล์ = ไฟล์ใหม่ (s_filePath);
รายการเขียน (เส้นทาง);
ผลลัพธ์ += s_filePath.concat(",");
} อื่น {
ผลลัพธ์ = "";
หยุดพัก;
-
-
-
} อื่น {
ผลลัพธ์ = "";
-
String s_resultJSON = this.jointJSON(result); // Splicing ส่งคืน JSON ส่วนหน้า
ออก.พิมพ์(s_resultJSON);
} จับ (ข้อยกเว้นจ) {
e.printStackTrace();
} ในที่สุด {
ออก.ล้าง();
ออก.ปิด();
-
-
-
* ประกบ JSON และส่งคืนชื่อไฟล์และไดเร็กทอรีวันที่ของไฟล์ที่บันทึกไว้ไปที่ส่วนหน้า (ส่วนหน้าอาจต้องใช้เส้นทางนี้เพื่อดำเนินการแบบฟอร์มอื่นให้เสร็จสิ้น เช่น การจัดเก็บเส้นทางของไฟล์ไปยังฐานข้อมูล)
* @param ผลลัพธ์เป็นสตริงรูปแบบ JSON
* @กลับ
* @throws UnsupportedEncodingException
-
สตริงส่วนตัว jointJSON (ผลลัพธ์สตริง) พ่น UnsupportedEncodingException {
สตริง str = "";
ถ้า (!"". เท่ากับ (ผลลัพธ์)) {
สตริง rs[] = result.split(",");
StringBuffer buffer = new StringBuffer("{/"rows/":[");
สำหรับ (int i = 0; i < rs.length; i++) {
สตริง s_tmpName = rs[i];
s_tmpName = s_tmpName.substring(uploadDir.length(), s_tmpName.length());
buffer.append("{/"name/":/"").append(s_tmpName).append("/"},");
-
str = buffer.toString();
str = str.substring(0, str.length() - 1).concat("]}");
} อื่น {
str = "{/"error/":/"-2/""; //อัพโหลดล้มเหลว
-
กลับ STR;
-
-
* ตั้งค่าประเภทการตอบสนอง ContentType เป็น "application/x-json"
* ตอบกลับ @param
-
setResponse เป็นโมฆะส่วนตัว (การตอบสนอง HttpServletResponse) {
response.setCharacterEncoding("UTF-8");
response.setContentType("application/json;charset=UTF-8");
response.setHeader("แคชควบคุม", "ไม่มีแคช");
-
-
test_upload.html
คัดลอกรหัสรหัสดังต่อไปนี้:
<!DOCTYPE html>
<html>
<หัว>
<meta charset="UTF-8">
<title>jQuery Uploadify + Apache Fileupload ตัวอย่างการอัพโหลดไฟล์แบบอะซิงโครนัส (2014-5-3)</title>
<link rel="stylesheet" type="text/css" href="/js/uploadify/uploadify.css">
<script src="/js/jquery-1.9.0.js"></script>
<script src="/js/uploadify/jquery.uploadify.min.js"></script>
<script type="text/javascript">
$(ฟังก์ชั่น() {
$('#fileupload').uploadify({
'วิธีการ' : 'โพสต์',
'buttonText' : 'ไฟล์อัพโหลดแฟลช',
'fileSizeLimit' : '1024KB',
'fileTypeExts' : '*.gif; *.jpg;
'swf' : '/js/uploadify/uploadify.swf',
'uploader' : '/upload', //นี่คือเส้นทางในการอัปโหลดภาพ ซึ่งเป็นเซิร์ฟเล็ตที่ฉันกำหนดค่าใน web.xml
'onUploadSuccess' : function(file, data, response) {//ข้อมูลที่ส่งคืนหลังจากอัพโหลดรูปภาพสำเร็จแล้วจะได้รับการประมวลผลที่นี่
var ary = eval("(" + data + ")").แถว;
สำหรับ (var i = 0; i < ary.length; i++) {
$("#J_div").append("<img alt='image' src='/upload/images" + ary[i].name + "' width='200px' height='200px'>");
-
-
-
-
</สคริปต์>
</หัว>
<ร่างกาย>
<h2>jQuery Uploadify + Apache Fileupload ตัวอย่างการอัพโหลดไฟล์แบบอะซิงโครนัส (2014-5-3)</h2>
<p>1. คุณสามารถจำกัดขนาดและประเภทของไฟล์ที่อัปโหลดได้ ตามทฤษฎีแล้ว คุณสามารถอัปโหลดไฟล์ประเภทใดก็ได้ (คุณสามารถกำหนดค่าตาม API ได้)</p>
<p>2. Apache commons-fileupload-1.3.1.jar ถูกใช้เป็นชุดเครื่องมือการอัปโหลดในเบื้องหลัง ตัวอย่างนี้รองรับการอัปโหลดหลายไฟล์ในคราวเดียว</p>
<p>3. สามารถระบุไดเร็กทอรีอัพโหลดไฟล์ได้ตามต้องการ โปรดกำหนดค่าใน web.xml;</p>
<p>4. ไม่พบรูปภาพที่อัปโหลดในหน้านี้ </p>
<p>สำหรับรายละเอียดเกี่ยวกับ Uploadify API โปรดดู http://www.uploadify.com/documentation/</p>
<p style="color: red">*หากคุณสนใจตัวอย่างนี้และต้องการทราบข้อมูลเพิ่มเติม ยินดีต้อนรับเข้าร่วมชุมชนการเรียนรู้ออนไลน์ Java Private School (329232140) </p>
<input id="fileupload" type="file" name="img" multiple="multiple"/>
<div id="J_div"></div>
</ร่างกาย>
</html>
เว็บ.xml
คัดลอกรหัสรหัสดังต่อไปนี้:
<?xml version="1.0" encoding="UTF-8"?>
<เว็บแอป xmlns:xsi = "http://www.w3.org/2001/XMLSchema-instance" xmlns = "http://java.sun.com/xml/ns/javaee" xsi:schemaLocation = "http ://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" metadata-complete="true" รุ่น = "3.0">
<ยินดีต้อนรับรายการไฟล์>
<ยินดีต้อนรับ-ไฟล์>test_upload.html</ยินดีต้อนรับ-ไฟล์>
</ยินดีต้อนรับรายการไฟล์>
<เซิร์ฟเล็ต>
<description>เซิร์ฟเล็ตที่ออกแบบมาเพื่อจัดการการอัพโหลดโดยเฉพาะ</description>
<servlet-name>FileUploadServlet</servlet-name>
<servlet-class>com.xiaoxing.upload.FileUploadServlet</servlet-class>
<init-พารามิเตอร์>
<description>ไดเร็กทอรีอย่างเป็นทางการสำหรับจัดเก็บไฟล์ คุณสามารถกำหนดค่าได้ด้วยตัวเอง</description>
<param-name>uploadDir</param-name>
<param-value>/upload/images/</param-value>
</init-พารามิเตอร์>
<init-พารามิเตอร์>
<คำอธิบาย>ไดเรกทอรีชั่วคราวที่เก็บไฟล์สามารถกำหนดค่าได้ด้วยตัวเอง ไฟล์ในนั้นจะถูกลบโดยอัตโนมัติโดยผู้ฟังที่กำหนดค่าด้านล่าง </คำอธิบาย>
<param-name>tempUploadDir</param-name>
<param-value>/upload/temp</param-value>
</init-พารามิเตอร์>
</เซิร์ฟเล็ต>
<การแมปเซิร์ฟเล็ต>
<servlet-name>FileUploadServlet</servlet-name>
<url-รูปแบบ>/อัปโหลด</url-รูปแบบ>
</การแมปเซิร์ฟเล็ต>
<ผู้ฟัง>
<description>การล้างทรัพยากรไฟล์ชั่วคราว มีชุดเครื่องมือมาด้วย เราไม่จำเป็นต้องเขียนมัน</description>
<listener-class>org.apache.commons.fileupload.servlet.FileCleanerCleanup</listener-class>
</ผู้ฟัง>
</เว็บแอป>