تقديم الموارد
يتطلب تحميل الملفات باستخدام تحميل الويب تقديم ثلاثة موارد: 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!