يمكن تنزيل مشروع عقدة بسيط ينفذ تحميل السحب والإفلات متعدد الملفات على Github. يمكنك تنزيله أولاً: https://github.com/johnharvy/uploadfiles/.
افتح حزمة تنسيق zip التي تم تنزيلها. يوصى باستخدام 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 src = "js/eventutil.js"> </script> <title> uploadfile </title> <style> #a1 {width: 100px ؛ الارتفاع: 100px ؛ الخلفية: #AAAAA Auto ؛} </style> </head> <body> <div id = "a1"> اسحب إلى هذا </div> <div id = "out-input"> </viv> <script> var a1 = document.getElementById ("a1") document.getElementById ("Out-Input") ، الملفات ، i ، len ؛ eventUtil.preventDefault (event) ؛ . +"بايت) <br/>" ؛ formData.append ("file"+i ، files [i]) ؛ i ++ ؛} output.innerhtml = info ؛ $. ajax ({type: "post" ، url: سلسلة بشكل افتراضي لتحميل البيانات نجاح: الدالة (rs) {console.log (rs) ؛} ، الخطأ: الدالة (r) {Alert ("خطأ في تحميل الملف!") ؛}}) ؛}} eventutil.addhandler (a1 ، "A1 ،" handevent) ؛ "Drop" ، HandleVent) ؛ </script> </body> </html>محتوى HTML بسيط للغاية ، ويعرض المرء نطاق السحب المسموح به ، ويتم استخدامه لعرض محتوى الملف الذي تم تحميله.
جزء JS:
لقد قمت هنا بإعداد كائن واجهة EventUtil ، والذي يمكنك اعتباره أيضًا مكتبة صغيرة للتعامل مع الأحداث. تتمثل وظيفتها في تغليف طرق مختلفة لربط نفس الأحداث في كل متصفح. من أجل تنفيذ طرق ربط الأحداث الشائعة لكل متصفح ، يتم تنفيذها بشكل موحد باستخدام كائن EventUtil. يمكنك ببساطة النظر إلى رمز التنفيذ الخاص به ، وهو أمر بسيط للغاية.
عندما يكتشف المتصفح ثلاثة أحداث من السحب و "Drager" و "Dragover" و "Drag" ، سيتم حظر السلوك الافتراضي ، وسيتم تنفيذ أحداثنا المخصصة عندما يكون "السحب" هو "السحب".
لأننا نحمل ملفًا ، نستخدم مثيل FormData هنا. أضف ملفًا إلى الكائن من خلال إلحاق () لتصبح ملف قائمة انتظار. بعد التحميل على الخادم ، سيتم تحليله في كائنات السمات بترتيب قائمة الانتظار. في هذا الحدث ، يتم استرداد الملفات المخزنة في هذا الحدث من خلال "event.datatransfer.files".
شيء آخر يجب ملاحظته هنا هو أن طريقة Ajax لـ jQuery تحتاج إلى تكوين ProcessData إلى خطأ عند تحميل كائنات الملف ، مما يعني عدم استخدام عملية القراءة الافتراضية. والسبب هو أنه بشكل افتراضي ، إذا كانت البيانات التي تم تمريرها من خلال خيار البيانات هي كائن (من الناحية الفنية ، طالما أنها ليست سلسلة) ، فسيتم معالجتها وتحويلها إلى سلسلة استعلام لتطابق نوع المحتوى الافتراضي "Application/X-WWW-Form-urlencoded". إذا كنت ترغب في إرسال معلومات DOM Tree أو أي معلومات أخرى لا تريد تحويلها ، فأنت بحاجة إلى ضبطها على FALSE.
بعد تحميل تحميل الملف بنجاح ، ستقوم وحدة التحكم بطباعة معلومات "{Infor:" Success "}".
في هذه المرحلة ، ينتهي الجزء الأمامي. دعنا نلقي نظرة على الكود على جانب Node.js.
هيكل الملف كما يلي:
دعونا أولاً نلقي نظرة على المحتوى في المسار - app.js:
var express = require ('express') ؛ var routes = require ('./ routes') ؛ var user = require ('./ routes/user') ؛ var http = required ('http') ؛ var path = require ('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 = require ("./ Action/FileUpload") ؛ // التوجيه حدث الاستماع إلى التحميل. user.list) ؛ http.createserver (app) .Listen (app.get ('port') ، function () {console.log ('Express Server الاستماع على المنفذ' + app.get ('port')) ؛}) ؛هناك العديد من الاختلافات من app.js. لقد قمت بتصدير كائن التطبيق لإعادة استخدامه في fileupload.js ، ثم قدمت وحدة FileUpload.js ، وحصلت على كائن التحميل الذي يحفظ جميع طرق الوحدة من خلال كائن الواجهة هذا ودعا طريقة التحميل.
حسنًا ، دعونا نلقي نظرة على ملف fileupload.js:
var multipart = require ('connect-multiparty') ؛ var app = require ("../ app") ؛ var path = require ('path') ؛ var fs = require ("fs") ؛ var app = app.app ؛ var uploadtest = {} ؛ NULL) {if (req.files ["file"+i]) تحميل (i) ؛ آخر {i = null ؛ path.basename (req.files ["file" + index] .Path) ؛ // يمكن أن تحدد واجهة المسار المسار والملف للملف. fs.createadStream (req.files ["file"+index] .path) .pipe (fs.createwRiteReam (targetpath)) ؛}}) ؛} uploadtest.uploadfile = uploadfile ؛ exports.uploadtest = uploadtest ؛Nodejs دائما بسيطة للغاية وقوية للغاية ، وخلاقة للغاية ، وهذا هو السبب في أنني أحب ذلك. نرى أن هناك بالفعل عدد قليل جدًا من الرموز الرئيسية هنا. سأقدم بإيجاز العملية المنطقية لتنفيذ تحميل الملف:
• الحصول على اسم ملف الملف الذي تم تحميله
• اضبط موقع تخزين الملف واسم الملف
• اقرأ دفق المحتوى للملف وإنشاء ملف جديد لكتابة دفق المحتوى
من أجل تحميل ملفات متعددة ، قمت أيضًا ببعض عمليات المطابقة ، والتي هي بديهية للغاية وليس من الصعب فهمها.
بعد تحميل الملف بنجاح ، سيظهر تحت ملف التحميل تحت الملف العام.
يتم تسجيل الوحدات المستخدمة في الملف في package.json. يمكن تثبيتها من خلال الأمر "تثبيت NPM" عن طريق إدخال عنوان الدليل الخاص بـ Package.json في المستوى المتزامن. إذا قمت بتشغيل ملفات المشروع التي تم تنزيلها على Github مباشرةً ، فلن تحتاج إلى تثبيتها بعد الآن.
ما سبق هو طريقة التنفيذ لدمج NodeJS و HTML5 لتحميل ملفات متعددة على الخادم. آمل أن يكون ذلك مفيدًا للجميع. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر على الجميع في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!