1. مقدمة
تحميل الملف هو وظيفة شائعة نسبيا. الطريقة التقليدية للتحميل أكثر إثارة للقلق. تحتاج إلى النقر فوق زر التحميل أولاً ، ثم ابحث عن المسار إلى الملف ، ثم تحميله. إنه يجلب مشاكل كبيرة لتجربة المستخدم. يبدأ HTML5 في دعم السحب وإسقاط واجهة برمجة التطبيقات المطلوبة للتحميل. Nodejs هي أيضًا تقنية أصبحت شائعة بشكل متزايد مؤخرًا. هذه هي المرة الأولى لي للمشاركة في NodeJS. في تطوير NodeJS ، فإن أحد أطر التنمية الأكثر شيوعًا هو Expess ، وهو إطار مشابه لنمط MVC. جنبا إلى جنب مع HTML5 و NODEJS Express ، يتم تحقيق وظيفة السحب والانخفاض.
2. تعميم المعرفة الأساسية
1. المعرفة الأساسية للعقود
بكل بساطة ، فإن NodeJS عبارة عن منصة تطوير تسمح لـ JS بالتشغيل على جانب الخادم. تتطور Nodejs بسرعة كبيرة ، وبدأت العديد من الشركات المحلية أيضًا في استخدامها ، مثل Taobao. تعتمد منصات تطوير تطبيقات الويب التقليدية على متعدد الخيوط لتحقيق استجابات طلبات عالية الاتصال. تعتمد Nodejs نموذج تصميم واحد غير متزامن غير متزامن ، ونموذج يحركه الحدث ، والذي يجلب تحسينات ضخمة في الأداء على NodeJs. هذا هو أيضا أكبر ميزة من nodejs. في Nodejs ، يتم تنفيذ جميع عمليات IO من خلال عمليات الاسترجاعات. عندما تنفذ Nodejs عمليات IO ، فإنها ستدفع طلب IO إلى قائمة انتظار الحدث ، وانتظر حتى يقوم البرنامج بمعالجته ، ثم الاتصال بوظيفة رد الاتصال لإرجاع النتيجة.
على سبيل المثال ، عند الاستعلام عن قاعدة البيانات ، تكون العملية كما يلي:
mysql.query ("select * from mytable" ، function (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 الشائعة ، فإنه ينفذ أيضًا التحكم في التوجيه ، ودعم دقة القالب ، والمحاولات الديناميكية ، ورد المستخدم ، وما إلى ذلك ، لكنه ليس إطارًا كليًا أيضًا. معظم الوظائف هي تغليف HTTP ، إنها مجرد إطار خفيف الوزن. تحتاج العديد من الوظائف أيضًا إلى دمجها في مكتبات الطرف الثالث وتنفيذها.
يوفر Exress دعمًا لوظائف التحميل المريحة للغاية. بعد طلب تحميل الملف ، سيتلقى Express الملف وتخزين الملف في دليل مؤقت. ثم في طريقة التوجيه ، نحتاج فقط إلى نسخ الملف من الدليل المؤقت إلى المجلد الذي نريد تخزين تحميل المستخدم. في جزء تحميل الملف ، يعتمد تطبيق جانب الخادم على وظيفة 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. تنفيذ الكود
دعونا أولاً نلقي نظرة على دليل الملفات في الواجهة الأمامية:
في:
يقوم uploader.js بتنفيذ تغليف وظيفة التحميل التي تدعمها HTML5.
يقوم exploaderqueue.js بتنفيذ إدارة قوائم انتظار الملفات وتحميل الملفات بشكل أساسي ، وتحميل الملفات في قائمة انتظار الملف إلى الخادم.
المدخل الرئيسي لتحميل ملف uploaderApp.js ، والذي يقوم بتنفيذ نافذة التحميل بشكل أساسي للاستماع لسحب الأحداث ودفع الملفات التي تم سحبها إلى قائمة انتظار ملف التحميل ، ويبدأ برنامج تحميل الملف.
فيما يلي شرح بسيط للرمز الأساسي (مطلوب). يمكن تنزيل جميع الرموز هنا: FileUploader
أولاً ، ببساطة تغليف exploader.js لتحميل الملفات التي توفرها HTML5
وظيفة تحميل (url ، البيانات ، الملفات) {this._files = files ؛ this._data = البيانات ؛ this._url = url ؛ this._xhr = null ؛ this.onloadStart = {} ؛ this.onloadend = {} ؛ this.onprogress = {} ؛ this.onerror = {} ؛ this.ontimeout = {} ؛ this.callback = {} ؛ // callback بعد أن يتم الانتهاء من الطلب _self = this ؛ } exploader.prototype = {init: function () {if (! isValid ()) {throw e ؛ } this._xhr = new xmlhttprequest () ؛ this._bindevents () ؛ } ، إرسال: function () {if (this._xhr == null) {this.init () ؛ } var formData = this._createformData () ؛ this._xhr.open ('post' ، this._url ، true) ؛ 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) {if (typeof _self.callback === 'function') {var status = _self._xhr.status ؛ var data = _self._xhr.responsetext ؛ _self.callback (الحالة ، البيانات) ؛ }}}}} ، _createformData: function () {var formData = new formData () ؛ this._adddatatoformdata (formData) ؛ this._addfiletoformdata (formData) ؛ إرجاع formdata ؛ } ، _adddatatoformdata: function (formData) {if (this._data) {for (var item in this._data) {formData.append (item ، this._data [item]) ؛ }}} ، _addfiletoformdata: function (formData) {if (this._files) {for (var i = 0 ؛ i <this._files.length ؛ i ++) {var file = this._files [i] ؛ formData.append ('file [' + i + ']' ، this._files [i]) ؛ }}}}} ؛ عرض codevar UploaderFactory = {send: function (url ، data ، files ، callback) {var insuploader = new loader (url ، data ، files) ؛ insuploader.callback = function (الحالة ، resData) {if (typeof callback === 'function') {callback (status ، resData) ؛ }} insuploader.send () ؛ إرجاع insuploader. }} ؛كائن التحميل يلف بشكل أساسي ببساطة واجهة برمجة التطبيقات الأصلية التي توفرها HTML5. يوفر UploaderFactory واجهة بسيطة ، والتي يمكن القيام بها مثل طريقة Ajax من JQuery ، ومكالمات تحميل الملفات. يتمثل دعم تحميل الملفات المقدم في HTML5 في تمديد بعض الخصائص والأساليب بناءً على XMLHTTPrequest الأصلي ، وتوفير كائنات formData لدعم عمليات تحميل الملفات.
قائمة انتظار تحميل الملف (TOPLOADERQUEUE.JS) هي أيضًا كائن مهم نسبيًا. ويتضمن كائنين ، واحد هو قائمة الانتظار ، وكائن قائمة انتظار الملف ، وهو مسؤول بشكل أساسي عن إدارة الإضافة والحذف والتعديل والاستعلام عن قوائم انتظار الملفات. الكائن الآخر هو تحميل محرك تحميل الملف. تعد وظيفتها مسؤولة بشكل أساسي عن إخراج كائنات الملفات من قائمة انتظار الملف ، والاتصال بكائن التحميل لتحميل الملفات ، ثم تحديث حالة الملف في قائمة انتظار الملف. قائمة الانتظار والتحميل هي كائنات Singleton.
أولاً ، دعنا نلقي نظرة على كائن قائمة انتظار الملف:
(function (upladerqueue) {var status = {ready: 0 ، تحميل: 1 ، كاملة: 2} var _self = null ؛ var مثيل = null ؛ queue () {this._datas = [] this.datas.push (المفتاح: البيانات: status.ready}) ؛ {فهرس var = this._getIndexbykey (مفتاح) ؛ this._getindexbykey (مفتاح) ؛ }} return -1 ؛ } ، getDatabyIndex: function (index) {if (index <0) {return null ؛ } إرجاع this._datas [index] ؛ } ، _getIndexByKey: function (key) {for (var i = 0 ؛ i <this._datas.length ؛ i ++) {if (this._datas [i] .Key == Key) {return i ؛ }} return -1 ؛ }} ؛ وظيفة getInstace () {if (مثيل === null) {مثيل = new Queue () ؛ مثيل العودة ؛ } آخر {return مثيل ؛ }} upladerqueue.queue = getInstance () ؛ upladerqueue.uploadstatus = status ؛}) (window.uploaderqueue) ؛يستخدم قائمة انتظار ملف التحميل صفيفًا لإدارة معلومات كل كائن ملف. يحتوي كل كائن ملف على ثلاث سمات: المفتاح والبيانات والحالة. هذا الكائن مسؤول بشكل أساسي عن وظائف إضافة كائنات الملفات وحذفها وتحديثها والبحث.
كائن آخر أكثر أهمية في قائمة انتظار ملف التحميل هو كائن محرك التحميل (uploadEngine.js)
(function (upladerqueue) {var extary = null ؛ var _self ؛ function uploadEngine () {this._url = null ؛ this._curuploadingkey = -1 ؛ // flags this.uploadStatusChanged = {} ؛ this.uploaditeMprogress = {} ؛ seturl: function (url) {this._url = url ؛ IF (exply) {this._uploaditem (exploy) ؛ Upload = UploaderFactory.send (this._url ، data.files ، function (status ، data) {_self._completeduploaditem.call (_ selev ، data) ؛ {_self.uploaditemprogress (_self._curuploadingkey ، e) ؛ }} ، _readyuploaditem: function (index) {this._curuploadingKey = upladerqueue.queue.getDatabyIndex (index) .Key ؛ if (typeof this.uploadStatusChanged === 'function') {this.uploadstatusChanged (this._curuploadingkey ، upladerqueue.uploadstatus.uploading) ؛ } upladerqueue.queue.setItemStatus (this._curuploadingkey ، upladerqueue.uploadstatus.uploading) ؛ } ، _completeduploaditem: function (status ، data) {if (typeof this.uploadStatusChanged === 'function') {this.uploadstatusChanged (this._curuploadingkey ، upladerqueue.uploadstats.complete) ؛ } upladerqueue.queue.setItemStatus (this._curuploadingkey ، upladerqueue.uploadstatus.complete) ؛ this._startupload () ؛ }} ؛ وظيفة getInstace () {if (مثيل === null) {مثيل = جديد exploadEngine () ؛ } مثيل الإرجاع ؛ } upladerqueue.engine = getInstace () ؛}) (window.uploaderqueue) ؛هذا الكائن بسيط نسبيًا ويوفر بشكل أساسي طريقة تشغيل و seturl ، والتي يتم استخدامها لبدء تشغيل محرك التحميل وتعيين مسار التحميل. يتم استخدام الطريقة العودية داخليًا لتحميل جميع الطرق في قائمة انتظار الملف إلى الخادم. استخدم exploadItemProgress لإخطار تقدم التحميلات الخارجية ، واستخدم UploadStatusChanged لإخطار حالة تحميل الملف لتحديث واجهة المستخدم.
يشتمل ToploaderApp.js بشكل أساسي على ثلاثة كائنات ، واحد هو كائن JQuery بسيط (APP $) يشبه jQuery. تستخدم بشكل رئيسي لأحداث الربط. أحدهما هو كائن التحميل ، وهو منطقة النافذة التي يتم سحبها وتحميلها ، والآخر هو كائن المدخل ، كائن التحميل. يتم استخدامه بشكل أساسي لتهيئة الكائنات ، وتوفير طريقة init إلى الخارج لتهيئة الكائن بأكمله.
للتعرف على الكود حول App $ و exploaderarea كائنات ، يرجى تنزيل رمز المصدر. ما يلي هو مجرد شرح موجز لكائن التحميل.
(function (app) {var _self ؛ function uploadermain (id) {this._id = id ؛ this._area = null ؛ this.uploaders = [] ؛ this._url = 'file/uploader' ؛ - exploaderqueue.uploadstat. Math.Round (100)) ؛ المفتاح ؛ }}} ؛ app.main = UploaderMain ؛ }) (window.uploaderApp) ؛يعادل كائن exploadermain الوسيط بين كل كائن ، وذلك أساسًا لجعل وظيفة التهيئة للكائن والاتصال ببعضها البعض بين الكائنات. اجعل كل كائن يتعاون مع بعضها البعض لإكمال وظائف الوحدة بأكملها. توفير طريقة init لتهيئة البرنامج بأكمله. في صفحة HTML ، فقط بحاجة إلى الكود التالي:
<script type = "text/javaScript"> var main = new loaderApp.main ('Container') ؛ main.init () ؛ </script>الرمز أعلاه هو إنشاء كائن إدخال ثم استخدام طريقة init لبدء البرنامج بأكمله.
ما سبق هو شرح بسيط للطرق الرئيسية ل JS الواجهة الأمامية. إذا كنت تريد معرفة المزيد ، يرجى تنزيل رمز المصدر. دعنا نلقي نظرة على الكود الرئيسي لتنفيذ الجانبية الخلفية JS (NodeJS).
في أساسيات Express ، قلنا بالفعل أن وظيفة تحميل الملف قد تم تغليفها بالكامل في Express. عند التوجيه إلى الإجراء ، تم تحميل الملف فقط إذا تم تحميل الملف على دليل مؤقت. يمكننا تكوين هذا الدليل المؤقت في app.js. طريقة التكوين هي كما يلي:
app.use (express.bodyParser ({eploaddir: __ dirname+'/public/temp'})) ؛وبهذه الطريقة ، بعد تحميل الملف ، يتم تخزين الملف في الدليل /العام /مؤقت ، ويتم الحصول على اسم الملف أيضًا بشكل عشوائي بواسطة Express من خلال خوارزميات معينة. في الإجراء الذي نكتبه ، نحتاج فقط إلى نقل الملفات في الدليل المؤقت إلى الدليل حيث يتم تخزين الملفات على الخادم ، ثم حذف الملفات في الدليل المؤقت. الرمز المحدد كما يلي:
دالة تحميل (req ، res) {if (req.files! = 'unfensed') {console.dir (req.files) ؛ utils.mkdir (). }} uploadFile (req ، res ، path ، index) {var temppath = req.files.file [index] .path ؛ var name = req.files.file [index] .Name ؛ if (temppath) {var rewame = promise.denodeify (fs.rename) ؛ إعادة تسمية (temppath ، المسار + الاسم) .Then (function () {var inflink = promise.denodeify (fs.unlink) ؛ inflink (temppath) ؛}). UploadFile (req ، res ، path ، index + 1) ؛ }}2. إدراك التأثير
4. احصل على الرمز
رمز تنزيل عنوان: //www.vevb.com/jiaoben/202117.html