1. คำนำ
การอัปโหลดไฟล์เป็นฟังก์ชั่นที่ค่อนข้างธรรมดา วิธีการอัพโหลดแบบดั้งเดิมนั้นลำบากมากขึ้น คุณต้องคลิกปุ่มอัปโหลดก่อนจากนั้นค้นหาเส้นทางไปยังไฟล์แล้วอัปโหลด มันนำปัญหาที่ยอดเยี่ยมมาสู่ประสบการณ์ผู้ใช้ HTML5 เริ่มสนับสนุนการลากและวาง API ที่ต้องการสำหรับการอัปโหลด NodeJS ยังเป็นเทคโนโลยีที่ได้รับความนิยมมากขึ้นเมื่อเร็ว ๆ นี้ นี่เป็นครั้งแรกของฉันที่จะมีส่วนร่วมใน NodeJS ในการพัฒนา NodeJS หนึ่งในกรอบการพัฒนาที่ใช้กันมากที่สุดคือ Expess ซึ่งเป็นกรอบการทำงานที่คล้ายกับรูปแบบ MVC เมื่อรวมกับ HTML5 และ NODEJS Express ฟังก์ชันของการอัปโหลดการลากและวางจะเกิดขึ้นได้
2. การทำให้เป็นที่นิยมของความรู้พื้นฐาน
1. ความรู้พื้นฐานเกี่ยวกับ nodejs
เพื่อให้ง่าย NodeJS เป็นแพลตฟอร์มการพัฒนาที่อนุญาตให้ JS ทำงานบนฝั่งเซิร์ฟเวอร์ NodeJS กำลังพัฒนาอย่างรวดเร็วและ บริษัท ในประเทศหลายแห่งก็เริ่มใช้เช่น Taobao แพลตฟอร์มการพัฒนาเว็บแอปพลิเคชันแบบดั้งเดิมนั้นขึ้นอยู่กับการทำมัลติเธรดเพื่อให้ได้คำตอบคำขอที่มีความขัดแย้งสูง NodeJS ใช้ IO แบบอะซิงโครนัสแบบเธรดเดี่ยวและแบบจำลองการออกแบบที่ขับเคลื่อนด้วยเหตุการณ์ซึ่งนำการปรับปรุงประสิทธิภาพอย่างมากให้กับ NodeJS นี่เป็นคุณสมบัติที่ใหญ่ที่สุดของ NodeJs ใน NodeJS การดำเนินการ IO ทั้งหมดจะดำเนินการผ่านการโทรกลับ เมื่อ NodeJS ดำเนินการ IO จะส่งคำขอ IO ไปยังคิวเหตุการณ์รอให้โปรแกรมดำเนินการแล้วเรียกใช้ฟังก์ชันการโทรกลับเพื่อส่งคืนผลลัพธ์
ตัวอย่างเช่นเมื่อสอบถามฐานข้อมูลการดำเนินการมีดังนี้:
mysql.Query ("เลือก * จาก myTable", ฟังก์ชั่น (res) {callback (res);});ในรหัสข้างต้นเมื่อ NodeJS ดำเนินการคำสั่งข้างต้นมันจะไม่รอให้ฐานข้อมูลส่งคืนผลลัพธ์ แต่จะดำเนินการต่อเพื่อดำเนินการต่อไปนี้ หลังจากฐานข้อมูลได้รับข้อมูลจะถูกส่งไปยังคิวลูปเหตุการณ์ สิ่งที่โทรกลับจะถูกดำเนินการหลังจากเธรดเข้าสู่คิวลูปเหตุการณ์
ฉันได้อ่านเพิ่มเติมเกี่ยวกับ nodejs เป็นเวลาสองวันและไม่รู้มากนัก หากต้องการเรียนรู้เพิ่มเติมคุณสามารถค้นหาบนอินเทอร์เน็ต
ความรู้เกี่ยวกับการเริ่มต้นใช้งานกับ nodejs http://www.nodebeginner.org/index-zh-cn.html //www.vevb.com/article/48755.htm
2. ความรู้พื้นฐานเกี่ยวกับการแสดงออก
NodeJS เป็นชุมชนโอเพนซอร์สที่ค่อนข้างใช้งานซึ่งมีห้องสมุดการพัฒนาของบุคคลที่สามจำนวนมากซึ่ง Express เป็นหนึ่งในกรอบที่กว้างขวางและใช้กันมากที่สุด นอกจากนี้ยังเป็นกรอบอย่างเป็นทางการที่แนะนำโดย NodeJS นอกเหนือจากการห่อหุ้มของการดำเนินการ HTTP ทั่วไปแล้วยังใช้การควบคุมการกำหนดเส้นทางการสนับสนุนการแก้ปัญหาแม่แบบความพยายามแบบไดนามิกการตอบกลับของผู้ใช้ ฯลฯ แต่ก็ไม่ใช่เฟรมเวิร์กที่มีอำนาจทุกอย่าง ฟังก์ชั่นส่วนใหญ่เป็น encapsulation ของ HTTP มันเป็นเพียงกรอบที่มีน้ำหนักเบา ฟังก์ชั่นจำนวนมากยังต้องรวมเข้ากับไลบรารีของบุคคลที่สามและนำไปใช้
Exress ให้การสนับสนุนสำหรับฟังก์ชั่นการอัปโหลดที่สะดวกมาก หลังจากคำขออัปโหลดไฟล์ Express จะได้รับไฟล์และจัดเก็บไฟล์ในไดเรกทอรีชั่วคราว จากนั้นในวิธีการกำหนดเส้นทางเราเพียงแค่ต้องคัดลอกไฟล์จากไดเรกทอรีชั่วคราวไปยังโฟลเดอร์ที่เราต้องการจัดเก็บการอัปโหลดของผู้ใช้ ในส่วนการอัปโหลดไฟล์การใช้งานฝั่งเซิร์ฟเวอร์จะขึ้นอยู่กับฟังก์ชั่นด่วน
3. html5 ลากและอัปโหลด API
HTML5 มีคุณสมบัติใหม่มากมายการลากเหตุการณ์และการอัปโหลดไฟล์เป็นหนึ่งในคุณสมบัติใหม่ เนื่องจากพื้นที่ จำกัด การใช้รหัสที่อัปโหลดแบบลากอัพจะถูกเน้นในภายหลัง ฉันจะไม่แสดงรายการ API ที่อัพโหลดอัพโหลดโดย HTML5 ทีละตัว หากคุณสนใจโปรดดูที่: http://w3school.com.cn/html5/html5_ref_eventattributes.asp#mouse_events //www.vevb.com/html5/85977.html
3. ลากและอัปโหลดเพื่อให้ได้
1. การใช้งานรหัส
ก่อนอื่นให้ดูที่ไดเรกทอรีไฟล์ของ JS front-end:
ใน:
uploader.js ส่วนใหญ่ใช้การห่อหุ้มของฟังก์ชั่นการอัปโหลดที่รองรับโดย HTML5
uploaderqueue.js ส่วนใหญ่ใช้การจัดการของการอัปโหลดคิวไฟล์และวัตถุอัพโหลดไฟล์อัพโหลดไฟล์ในคิวไฟล์ไปยังเซิร์ฟเวอร์
ทางเข้าหลักในการอัปโหลดไฟล์ UploaderApp.js ซึ่งส่วนใหญ่ใช้หน้าต่างอัปโหลดเพื่อฟังเหตุการณ์ลากและผลักไฟล์ที่ลากลงในคิวไฟล์อัปโหลดและเริ่มโปรแกรมอัปโหลดไฟล์
ต่อไปนี้เป็นคำอธิบายง่ายๆของรหัสหลัก (จำเป็น) รหัสทั้งหมดสามารถดาวน์โหลดได้ที่นี่: fileuploader
ขั้นแรกเพียงแค่ห่อหุ้ม uploader.js สำหรับการอัปโหลดไฟล์ที่จัดทำโดย HTML5
ฟังก์ชั่นอัปโหลด (url, data, ไฟล์) {this._files = ไฟล์; this._data = ข้อมูล; this._url = url; this._xhr = null; this.onloadstart = {}; this.onloadend = {}; this.onProgress = {}; this.onerror = {}; this.ontimeout = {}; this.callback = {}; // การโทรกลับหลังจากคำขอเสร็จสมบูรณ์ _self = this; } uploader.prototype = {init: function () {if (! isvalid ()) {throw e; } this._xhr = ใหม่ xmlhttprequest (); this._bindevents (); }, send: function () {if (this._xhr == null) {this.init (); } var formData = this._CreateFormData (); this._xhr.open ('โพสต์', this._url, จริง); this._xhr.send (formdata); }, _bindevents: function () {_self = this; this._xhr.upload.loadStart = function (e) {evalfunction (_self.onloadstart, e); } this._xhr.upload.onload = function (e) {evalfunction (_self.onload, e); - this._xhr.upload.onloadend = function (e) {evalfunction (_self.onloadend, e); } this._xhr.upload.onprogress = function (e) {evalfunction (_self.onprogress, e); - this._xhr.upload.onerror = function (e) {evalfunction (_self.onerror, e); - this._xhr.upload.ontimeout = function (e) {evalfunction (_self.ontimeout, e); } this._xhr.onreadyStateChange = function () {if (_self._xhr.readyState == 4) {ถ้า (typeof _self.callback === 'function') {สถานะ var = _self._xhr.status; var data = _self._xhr.responsetext; _Self.CALLBACK (สถานะข้อมูล); }}}}}, _CreateFormData: function () {var formData = new FormData (); this._adddatatoformdata (formdata); this._addfiletoformdata (formdata); คืนฟอร์ดูดา; }, _adddatatoformdata: ฟังก์ชัน (formData) {ถ้า (this._data) {สำหรับ (รายการ var ใน this._data) {formData.Append (รายการ, this._data [รายการ]); }}}, _addFileToformData: ฟังก์ชัน (formData) {ถ้า (this._files) {สำหรับ (var i = 0; i <this._files.length; i ++) {var file = this._files [i]; formData.Append ('ไฟล์ [' + i + ']', this._files [i]); }}}}}; ดู codeVar uploaderFactory = {send: function (url, data, ไฟล์, การโทรกลับ) {var insuploader = uploader ใหม่ (URL, ข้อมูล, ไฟล์); insuploader.callback = function (สถานะ, resdata) {ถ้า (typeof callback === 'function') {callback (สถานะ, resdata); }} insuploader.send (); ส่งคืน Insuploader; -วัตถุอัพโหลดส่วนใหญ่จะห่อหุ้ม API ดั้งเดิมที่จัดทำโดย HTML5 UploaderFactory ให้อินเทอร์เฟซอย่างง่ายซึ่งสามารถทำได้เช่นเมธอด AJAX ของ JQuery การอัพโหลดไฟล์ การสนับสนุนสำหรับการอัปโหลดไฟล์ที่มีให้ใน HTML5 คือการขยายคุณสมบัติและวิธีการบางอย่างตาม XMLHTTTPREQUEST ดั้งเดิมและให้วัตถุ FormData เพื่อสนับสนุนการดำเนินการอัปโหลดไฟล์
คิวอัปโหลดไฟล์ (uploaderqueue.js) เป็นวัตถุที่ค่อนข้างสำคัญ มันมีวัตถุสองวัตถุหนึ่งคือคิววัตถุคิวไฟล์ซึ่งส่วนใหญ่รับผิดชอบในการจัดการการเพิ่มการลบการปรับเปลี่ยนและการสืบค้นของคิวไฟล์ วัตถุอื่นคือ UploadEngine ซึ่งเป็นเอ็นจิ้นอัพโหลดไฟล์ ฟังก์ชั่นส่วนใหญ่มีหน้าที่รับผิดชอบในการนำวัตถุไฟล์ออกจากคิวไฟล์เรียกออบเจ็กต์อัพโหลดเพื่ออัปโหลดไฟล์จากนั้นอัปเดตสถานะไฟล์ในคิวไฟล์ คิวและอัพโหลด uploadEngine เป็นวัตถุซิงเกิลตัน
ก่อนอื่นมาดูวัตถุคิวไฟล์:
(ฟังก์ชั่น (upladerqueue) {สถานะ var = {ready: 0, การอัปโหลด: 1, เสร็จสมบูรณ์: 2} var _self = null; var อินสแตนซ์ = null; ฟังก์ชั่นคิว () {this._datas = []; this._cursize = 0; this._datas.push (คีย์: คีย์, ข้อมูล: สถานะ: สถานะ.}); {var index = this._getindexbykey (คีย์); this._getIndexbyKey (คีย์); ถ้า (ดัชนี! = -1) {this._datas [ดัชนี] .status = สถานะ; }} return -1; }, getDatabyIndex: ฟังก์ชัน (ดัชนี) {ถ้า (ดัชนี <0) {return null; } return this._datas [ดัชนี]; }, _getIndexByKey: ฟังก์ชั่น (คีย์) {สำหรับ (var i = 0; i <this._datas.length; i ++) {ถ้า (this._datas [i] .key == คีย์) {return i; }} return -1; - ฟังก์ชั่น getinstace () {ถ้า (อินสแตนซ์ === null) {อินสแตนซ์ = ใหม่คิว (); อินสแตนซ์กลับ; } else {return instance; }} upladerqueue.queue = getInstance (); upladerqueue.uploadstatus = สถานะ;}) (window.uploaderqueue);คิวการอัปโหลดไฟล์ใช้อาร์เรย์เพื่อจัดการข้อมูลของวัตถุแต่ละไฟล์ แต่ละวัตถุไฟล์มีสามแอตทริบิวต์: คีย์ข้อมูลและสถานะ วัตถุนี้ส่วนใหญ่รับผิดชอบต่อฟังก์ชั่นของการเพิ่มการลบการอัปเดตและการค้นหาวัตถุไฟล์
วัตถุที่สำคัญอีกอย่างหนึ่งในคิวไฟล์อัปโหลดคือวัตถุอัพโหลดเอ็นจิ้น (uploadEngine.js)
(ฟังก์ชั่น (Upladerqueue) {var instance = null; var _self; function uploadEngine () {this._url = null; this._curuploadingKey = -1; // flags this.uploadStatusChanged = {}; (url) {this._url = url; {this._uploaditem (ดัชนี); UploaderFactory.Send (this._url, null, data.files, ฟังก์ชั่น (สถานะ, ข้อมูล) {_self._completeduploaditem.call (_self, สถานะ, ข้อมูล);}); _self.uploadItemProgress (_self._curuploadingKey, e); }}, _ReadyUploadItem: ฟังก์ชั่น (ดัชนี) {this._curuploadingKey = upladerqueue.queue.getDatabyIndex (ดัชนี) .key; if (typeof this.uploadstatusChanged === 'ฟังก์ชั่น') {this.uploadstatusChanged (this._curuploadingKey, upladerqueue.uploadstatus.uploading); } upladerqueue.queue.setItemstatus (this._curuploadingKey, Upladerqueue.uploadstatus.uploading); }, _compleTedUploadItem: ฟังก์ชั่น (สถานะ, ข้อมูล) {ถ้า (typeof this.uploadStatusChanged === 'ฟังก์ชั่น') {this.uploadStatusChanged } upladerqueue.queue.setItemstatus (this._curuploadingKey, upladerqueue.uploadstatus.complete); this._startupload (); - ฟังก์ชั่น getinstace () {ถ้า (อินสแตนซ์ === null) {อินสแตนซ์ = ใหม่ uploadEngine (); } return อินสแตนซ์; } upladerqueue.engine = getInstace ();}) (window.uploaderqueue);วัตถุนี้ค่อนข้างง่ายและส่วนใหญ่ให้วิธีการเรียกใช้และ seturl ซึ่งใช้ในการเริ่มต้นการอัปโหลดเอ็นจิ้นและตั้งค่าเส้นทางการอัปโหลด วิธีการเรียกซ้ำใช้ภายในเพื่ออัปโหลดวิธีการทั้งหมดในคิวไฟล์ไปยังเซิร์ฟเวอร์ ใช้ UploadItemProgress เพื่อแจ้งความคืบหน้าของการอัปโหลดภายนอกและใช้ UploadStatusChanged เพื่อแจ้งสถานะการอัปโหลดไฟล์เพื่ออัปเดต UI
uploaderapp.js ส่วนใหญ่มีสามวัตถุหนึ่งชิ้นเป็นวัตถุ jQuery ง่าย ๆ (แอพ $) คล้ายกับ jQuery ส่วนใหญ่ใช้สำหรับเหตุการณ์ที่มีผลผูกพัน หนึ่งคือวัตถุ Uploaderarea ซึ่งเป็นพื้นที่หน้าต่างที่ถูกลากและอัปโหลดและอีกอันคือวัตถุทางเข้าวัตถุอัพโหลด ส่วนใหญ่จะใช้ในการเริ่มต้นวัตถุโดยให้วิธีการเริ่มต้นไปยังภายนอกเพื่อเริ่มต้นวัตถุทั้งหมด
หากต้องการเรียนรู้เกี่ยวกับรหัสเกี่ยวกับแอป $ และอัพเดตอัพเดตโปรดดาวน์โหลดซอร์สโค้ด ต่อไปนี้เป็นเพียงคำอธิบายสั้น ๆ ของวัตถุ Uploadermain
(ฟังก์ชั่น (แอป) {var _self; ฟังก์ชั่น uploadermain (id) {this._id = id; this._area = null; this.uploaders = []; this._url = 'ไฟล์/uploader'; uploadermain.prototype = {init: {_self = this.s. _initqueueeng: function () {uploaderqueue.engine.seturl (this._url); Uploaderqueue.uploadstatus.complete) {_self._area.completeitem (คีย์); Math.round (ความคืบหน้า * 100)); คีย์ return;} this._area.cancelitem = ฟังก์ชั่น (คีย์) {uploaderqueue.queue.remove (คีย์); - app.main = uploadermain; }) (window.uploaderApp);วัตถุ Uploadermain นั้นเทียบเท่ากับตัวกลางระหว่างแต่ละวัตถุส่วนใหญ่เพื่อให้ฟังก์ชั่นการเริ่มต้นของวัตถุและเรียกกันระหว่างวัตถุ ทำให้แต่ละวัตถุทำงานร่วมกันเพื่อให้ฟังก์ชั่นของโมดูลทั้งหมดเสร็จสมบูรณ์ ให้วิธีการเริ่มต้นเพื่อเริ่มต้นโปรแกรมทั้งหมด ในหน้า HTML เพียงแค่ต้องการรหัสต่อไปนี้:
<script type = "text/javascript"> var main = new uploaderapp.main ('container'); main.init (); </script>รหัสด้านบนคือการสร้างวัตถุรายการจากนั้นใช้วิธีการเริ่มต้นเพื่อเริ่มโปรแกรมทั้งหมด
ข้างต้นเป็นคำอธิบายง่ายๆเกี่ยวกับวิธีการหลักของ JS front-end หากคุณต้องการทราบข้อมูลเพิ่มเติมโปรดดาวน์โหลดซอร์สโค้ด มาดูรหัสหลักของการใช้งานด้านแบ็กเอนด์ JS (NodeJs)
ในพื้นฐานของ Express เราได้กล่าวไปแล้วว่าฟังก์ชั่นการอัปโหลดไฟล์ได้รับการห่อหุ้มอย่างสมบูรณ์ใน Express เมื่อกำหนดเส้นทางไปยังการดำเนินการไฟล์จะถูกอัปโหลดเฉพาะเมื่อไฟล์ถูกอัปโหลดไปยังไดเรกทอรีชั่วคราว เราสามารถกำหนดค่าไดเรกทอรีชั่วคราวนี้ใน app.js วิธีการกำหนดค่ามีดังนี้:
app.use (express.bodyparser ({uploaddir: __ dirname+'/public/temp'}));ด้วยวิธีนี้หลังจากอัปโหลดไฟล์ไฟล์จะถูกเก็บไว้ในไดเรกทอรี /สาธารณะ /อุณหภูมิและชื่อไฟล์จะได้รับการสุ่มโดย Express ผ่านอัลกอริทึมบางอย่าง ในการกระทำที่เราเขียนเราจะต้องย้ายไฟล์ในไดเรกทอรีชั่วคราวไปยังไดเรกทอรีที่เก็บไฟล์ไว้บนเซิร์ฟเวอร์แล้วลบไฟล์ในไดเรกทอรีชั่วคราว รหัสเฉพาะมีดังนี้:
ฟังก์ชั่นอัปโหลด (req, res) {if (req.files! = 'undifened') {console.dir (req.files); utils.mkdir (). จากนั้น (ฟังก์ชั่น (พา ธ ) {uploadfile (req, res, path, 0);}); }} ฟังก์ชั่น uploadfile (req, res, path, index) {var temppath = req.files.file [ดัชนี] .path; var name = req.files.file [index] .name; if (temppath) {var remrame = promise.denodeify (fs.rename); Rename (Temppath, Path + Name). จากนั้น (function () {var unlink = promise.denodeify (fs.unlink); unlink (temppath);}). จากนั้น (ฟังก์ชั่น () {ถ้า (index == req.files.file.length - 1) {var res = {code: 1, des: uploadfile (req, res, path, index + 1);}}); -2. ตระหนักถึงผลกระทบ
4. รับรหัส
รหัสดาวน์โหลดที่อยู่: //www.vevb.com/jiaoben/202117.html