تحميل متعدد الملفات باستخدام تحميل الويب

تقديم الموارد

يتطلب تحميل الملفات باستخدام تحميل الويب تقديم ثلاثة موارد: JS ، CSS ، و SWF.

 <!-تقديم CSS-> <Link Rel = "STYLESHEET" type = "text/css" href = "webuploader folder/webuploader.css"> <!-تقديم js-> <script type = "text/javaScript" src = "webuploader/webuploader" التهيئة وسيتم عرضها لاحقًا->

تحميل الملف

يحتوي WebUploader فقط على التنفيذ الأساسي لتحميلات الملفات ولا يتضمن جزء واجهة المستخدم. لذلك ، يمكنك لعب الجوانب التفاعلية بحرية. سيوضح ما يلي كيفية تنفيذ نسخة بسيطة.

يرجى النقر فوق الزر "تحديد الملف" أدناه ، ثم انقر فوق "بدء تحميل" لتجربة هذا العرض التوضيحي.

جزء HTML

أولاً ، قم بإعداد بنية DOM ، بما في ذلك ثلاثة أجزاء: الحاويات التي تخزن معلومات الملف وأزرار التحديد وأزرار التحميل.

 <div id = "uploader"> <!-يستخدم لتخزين معلومات الملف-> <div id = "thelist"> </viv> <div> <div id = "paceer"

تهيئة تحميل الويب

للحصول على التفاصيل ، يرجى إلقاء نظرة على قسم التعليقات في الكود.

 var uploader = webuploader.create ({// swf path path swf: base_url + '/js/uploader.swf' ، // file stree server. server: 'http://webuploader.duapp.com/server/fileud أو فلاش.

إظهار اختيار المستخدم

نظرًا لأن webuploader لا يتعامل مع منطق واجهة المستخدم ، فمن الضروري الاستماع إلى الحدث المذكور لتنفيذه.

 // عند إضافة ملف إلى Queue Uploader.on ('filequeued' ، function (file) {$ list.append ('<div id = "' + file.id + '">' + '<h4>' + file.name + '</h4>' + '<p> انتظر التحميل ... </p>

تقدم تحديث الملف

عند تحميل الملف ، سيقوم جهاز تحميل الويب بإرسال حدث تحميل ، والذي يحتوي على كائن الملف وتقدم التحميل الحالي للملف.

 // إنشاء شريط تقدم لعرضه في الوقت الفعلي أثناء تحميل الملف. Toploader.on ('UploadProgress' ، function (file ، النسبة المئوية) {var $ li = $ ('#' + file.id) ، $ ٪ = $ li.find ('. progress .progress-bar') ؛ "</div> ').

ملف النجاح ومعالجة الفشل

إذا فشل تحميل الملف ، فسيتم إرسال حدث تحميل ، وإذا تم تحميل الملف بنجاح ، فسيتم إرسال حدث التحميل. بغض النظر عن النجاح أو الفشل ، سيتم تشغيل حدث UploadComplete بعد تحميل الملف.

 exploader.on ('UploadSuccess' ، function (file) {$ ('#'+file.id) .find ('p.state'). text ('exploaded') ؛}) ؛ Uploader.on ('UploadError' ، function (file) {$ ('#'+file.id) .find ('p.state'). text ('epload error') ؛}) ؛ TOPLOADER.ON ('UPLOADCOMPLETE' ، function (file) {$ ('#'+file.id) .find ('. progress'). fadeout () ؛}) ؛ TOPLOADER.ON ('UPLOADCOMPLETE' ، function (file) {$ ('#'+file.id) .find ('. progress'). fadeout () ؛}) ؛

تحميل الصورة

بالمقارنة مع تحميل الملفات العادية ، يوضح هذا العرض التوضيحي: تصفية الملفات ومعاينة الصور وتحميل ضغط الصورة وغيرها من الوظائف.

HTML

لتنفيذ العرض التوضيحي على النحو الوارد أعلاه ، تحتاج أولاً إلى إعداد زر وحاوية لتخزين قائمة معلومات الملف المضافة.

 <!-جزء هيكل DOM-> <div id = "uploader-demo"> <!-يستخدم لتخزين العنصر-> <div id = "fileList"> </viv> <div id = "filepicker"> حدد الصور </div> </div>

جافا سكريبت

إنشاء مثيل تحميل الويب

 . "http://webuploader.duapp.com/server/fileupload.php ، // حدد زر الملف. "GIF ، JPG ، JPEG ، BMP ، PNG" ، Mimetypes: "Image/*'}}) ؛

استمع إلى الحدث FileQueued وإنشاء معاينة الصور من خلال تحميل. makethumb.

ملاحظة: ما تحصل عليه هنا هو بيانات URL للبيانات ، ولا تدعم IE6 و IE7 المعاينة المباشرة. يمكن إكمال المعاينة مع فلاش أو الخادم.

 // عند إضافة ملف ، uploader.on ('fileQueued' ، function (file) {var $ li = $ ('<div id = "' + file.id + '" ) ؛ SRC) ؛

ثم الباقي هو موجه حالة التحميل. عند تحميل عملية تحميل الملف ، يكون التحميل ناجحًا ، وفشل التحميل ، ويتم الانتهاء من التحميل ، يتم تحميل الأحداث على التوالي ، التحميل ، التحميل ، التحميل ، وتحميل الأحداث على التوالي.

 // إنشاء شريط تقدم لعرضه في الوقت الفعلي أثناء تحميل الملف. uploader.on ('eploadprogress' ، function (file ، النسبة المئوية) {var $ li = $ ('#'+file.id) ، $ ٪ = $ li.find ('. .find ('span') ؛} $ في المئة. // يتم تحميل الملف بنجاح ، وأضف فئة ناجحة إلى العنصر ، وتمييز التحميل باستخدام Style. TOPLOADER.ON ('UploadSuccess' ، function (file) {$ ('#'+file.id) .addClass ('Upload-State-done') ؛}) ؛ // فشل تحميل الملف ، وعرض خطأ التحميل. Uploader.on ('UploadError' ، function (file) {var $ li = $ ('#'+file.id) ، $ error = $ li.find ('div.error') ؛ // تجنب الإنشاء المتكرر إذا ($ error.length) {$ error = $ ('</div>). // بعد اكتمال التحميل ، فإنه ناجح أو فشل ، حذف شريط التقدم أولاً. Uploader.on ('UploadComplete' ، function (file) {$ ('#'+file.id) .find ('. progress'). remove () ؛}) ؛

ما ورد أعلاه هو المعرفة ذات الصلة المقدمة لك باستخدام محمل الويب لتحقيق تحميل متعدد الملفات. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!