โครงการโหนดอย่างง่ายที่ใช้การอัปโหลดแบบลากและวางแบบหลายไฟล์สามารถดาวน์โหลดได้บน GitHub คุณสามารถดาวน์โหลดได้ก่อน: https://github.com/johnharvy/uploadfiles/
ปลดล็อกแพ็คเกจรูปแบบซิปที่ดาวน์โหลดมา ขอแนะนำให้ใช้ WebStom เพื่อเรียกใช้โครงการและเริ่มโครงการผ่าน App.js หากไม่สามารถพบสภาพแวดล้อมการดำเนินการ Node.exe ได้โปรดระบุตำแหน่งการติดตั้ง node.exe ของคุณ เฟรมเวิร์กด่วนที่ฉันใช้ที่นี่คือเวอร์ชัน 3.21.2
มาแนะนำสั้น ๆ ว่าเอฟเฟกต์การลากและหล่นเกิดขึ้นได้อย่างไร
มาดูรหัสก่อน:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <script src = "js/jQuery.js"> </script> <script src = "js/eventutil.js"> </script> #aaaaaa; text-allign: center; line-height: 100px; color: rgba (81, 49, 202, 0.72); ระยะขอบ: 150px auto;} </style> </head> <body> <div id = "A1"> ลากไปยังสิ่งนี้ a1 = document.getElementById ("A1"); ฟังก์ชั่น HandleEvent (เหตุการณ์) {var info = "", output = document.getElementById ("out-input"), ไฟล์, i, len; eventutil.preventDefault (เหตุการณ์); // พฤติกรรมเริ่มต้นของการปิดกั้นเหตุการณ์ var formData = new FormData (); ถ้า (Event.type == "drop") {files = event.datAtRansfer.files; i = 0; len = files.length; ในขณะที่ (i <len) {info += ไฟล์ [i] +"ไบต์) <br/>"; formData.Append ("ไฟล์"+i, ไฟล์ [i]); i ++;} output.innerhtml = info; $. ajax ({type: "post", url: "uploadfile" สตริงโดยค่าเริ่มต้นสำหรับการอัปโหลดข้อมูลความสำเร็จ: ฟังก์ชั่น (rs) {console.log (rs);}, ข้อผิดพลาด: ฟังก์ชั่น (r) {แจ้งเตือน ("ข้อผิดพลาดในการอัปโหลดไฟล์!");}});}} eventutil.addhandler (a1, "dragover" "drop", handleEvent); </script> </body> </html>เนื้อหา HTML นั้นง่ายมากหนึ่งแสดงช่วงการลากที่อนุญาตและหนึ่งใช้เพื่อแสดงเนื้อหาของไฟล์ที่อัปโหลด
JS Part:
ที่นี่ฉันได้เตรียมวัตถุอินเทอร์เฟซ Eventutil ซึ่งคุณสามารถถือว่าเป็นห้องสมุดขนาดเล็กสำหรับการจัดการกิจกรรม ฟังก์ชั่นของมันคือการห่อหุ้มวิธีการที่แตกต่างกันสำหรับการเชื่อมโยงเหตุการณ์เดียวกันในแต่ละเบราว์เซอร์ เพื่อที่จะใช้วิธีการเชื่อมโยงเหตุการณ์ทั่วไปของแต่ละเบราว์เซอร์มันจะถูกนำไปใช้อย่างสม่ำเสมอโดยใช้วัตถุ EventUtil คุณสามารถดูรหัสการใช้งานซึ่งง่ายมาก
เมื่อเบราว์เซอร์ตรวจจับเหตุการณ์การลากสามเหตุการณ์ "Drager", "Dragover" และ "Drag" พฤติกรรมเริ่มต้นจะถูกบล็อกและเหตุการณ์ที่กำหนดเองของเราจะถูกดำเนินการเมื่อสถานการณ์ "ลาก" คือ "ลาก"
เนื่องจากเราอัปโหลดไฟล์เราจึงใช้อินสแตนซ์ FormData ที่นี่ เพิ่มไฟล์ไปยังวัตถุผ่านภาคผนวก () เพื่อเป็นไฟล์คิว หลังจากอัปโหลดไปยังเซิร์ฟเวอร์มันจะถูกแยกวิเคราะห์เป็นวัตถุแอตทริบิวต์ในลำดับคิว ในกรณีที่ไฟล์ที่เก็บไว้ในเหตุการณ์จะถูกดึงผ่าน "Event.datAtransfer.files"
อีกสิ่งที่ควรทราบที่นี่คือวิธีการ AJAX ของ jQuery จำเป็นต้องกำหนดค่า processData เป็นเท็จเมื่ออัปโหลดวัตถุไฟล์ซึ่งหมายความว่าไม่ใช้การดำเนินการอ่านเริ่มต้น เหตุผลก็คือโดยค่าเริ่มต้นหากข้อมูลที่ส่งผ่านผ่านตัวเลือกข้อมูลเป็นวัตถุ (การพูดทางเทคนิคตราบใดที่ไม่ใช่สตริง) มันจะถูกประมวลผลและแปลงเป็นสตริงการสืบค้นเพื่อให้ตรงกับประเภทเนื้อหาเริ่มต้น หากคุณต้องการส่งข้อมูล DOM Tree หรือข้อมูลอื่น ๆ ที่คุณไม่ต้องการแปลงคุณต้องตั้งค่าเป็น FALSE
หลังจากอัปโหลดไฟล์แล้วคอนโซลจะพิมพ์ข้อมูล "{infor:" ความสำเร็จ "}" ได้สำเร็จ
ณ จุดนี้ส่วนด้านหน้าจะสิ้นสุดลง มาดูรหัสที่ด้าน node.js
โครงสร้างไฟล์มีดังนี้:
ก่อนอื่นดูเนื้อหาในเส้นทาง - app.js:
var express = require ('express'); เส้นทาง var = ต้องการ ('./ route'); var user = require ('./ เส้นทาง/ผู้ใช้'); var http = ต้องการ ('http'); var path = ต้องการ ('path'); var app = express (); 'jade'); app.use (express.favicon ()); app.use (express.logger ('dev')); app.use (express.json ()); app.use (express.urlencoded ()) ; app.use (express.methodoverride ()); app.use (app.router); app.use (express.static (path.join (__ dirname)))); exports.app = app; var; uploadAction = ต้องการ ("./ action/fileUpload"); // การกำหนดเส้นทางเหตุการณ์การฟัง uploadAction.uploadtest.uploadfile (); // ไฟล์อัปโหลดอัปโหลด upolif ('การพัฒนา' == app.get ('env')) {app.use (express.errorHandler (); user.list); http.createserver (แอพ) .Listen (app.get ('พอร์ต'), ฟังก์ชัน () {console.log ('เซิร์ฟเวอร์ด่วนฟังบนพอร์ต' + app.get ('พอร์ต'));});มีความแตกต่างหลายประการจาก app.js เริ่มต้น ฉันส่งออกออบเจ็กต์แอปเพื่อนำกลับมาใช้ใหม่ใน fileUpload.js จากนั้นแนะนำโมดูล fileupload.js และได้รับวัตถุ uploadtest ที่บันทึกวิธีการทั้งหมดของโมดูลผ่านวัตถุอินเทอร์เฟซนี้และเรียกวิธีการอัปโหลดไฟล์
ตกลงในที่สุดลองดูที่ไฟล์ fileupload.js:
var multipart = ต้องการ ('Connect-Multiparty'); var app = ต้องการ ("../ app"); var path = ต้องการ ('path'); var fs = ต้องการ ("fs"); var app = app.app; var uploadtest = {}; ฟังก์ชั่น uploadfile () null) {ถ้า (req.files ["ไฟล์"+i]) อัปโหลด (i); else {i = null; res.json ({infor: "ความสำเร็จ"}); return; path.basename (req.files ["ไฟล์" + index] .path); // path interface สามารถระบุเส้นทางและชื่อไฟล์ของไฟล์ fs.createReadStream (req.files ["ไฟล์"+ดัชนี] .path) .pipe (fs.createwritestream (targetath));}});} uploadtest.uploadfile = uploadfile; exports.uploadtest = uploadtest;NodeJs นั้นเรียบง่ายและทรงพลังเสมอและสร้างสรรค์สูงซึ่งเป็นเหตุผลว่าทำไมฉันถึงชอบ เราเห็นว่ามีรหัสคีย์น้อยมากที่นี่ ฉันจะแนะนำกระบวนการเชิงตรรกะของการใช้งานการอัปโหลดไฟล์สั้น ๆ :
•รับชื่อไฟล์ของไฟล์ที่อัปโหลด
•ตั้งค่าตำแหน่งที่เก็บไฟล์และชื่อไฟล์
•อ่านสตรีมเนื้อหาของไฟล์และสร้างไฟล์ใหม่เพื่อเขียนสตรีมเนื้อหา
ในการอัปโหลดหลายไฟล์ฉันยังได้ทำการจับคู่บางอย่างซึ่งใช้งานง่ายและไม่ยากที่จะเข้าใจ
หลังจากอัปโหลดไฟล์เรียบร้อยแล้วมันจะปรากฏขึ้นภายใต้ไฟล์ uploadfiles ภายใต้ไฟล์สาธารณะ
โมดูลที่ใช้ในไฟล์จะถูกบันทึกใน package.json พวกเขาสามารถติดตั้งผ่านคำสั่ง "การติดตั้ง NPM" โดยป้อนที่อยู่ไดเรกทอรีของ package.json ระดับพร้อมกัน หากคุณเรียกใช้ไฟล์โครงการที่ดาวน์โหลดบน GitHub โดยตรงคุณไม่จำเป็นต้องติดตั้งอีกต่อไป
ข้างต้นเป็นวิธีการใช้งานของการรวม NodeJS และ HTML5 เพื่ออัปโหลดหลายไฟล์ไปยังเซิร์ฟเวอร์ ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!