يمكن لمكون تحميل ملف WebUploader الاستفادة الكاملة من مزايا HTML5 في المتصفحات الحديثة ، مع عدم التخلي عن متصفحات IE السائدة ، باستخدام وقت تشغيل الفلاش الأصلي ، وهو متوافق مع IE6+، iOS 6+ ، Android 4+. مجموعتان من وقت التشغيل ، يمكن تحديد طريقة الاتصال نفسها من قبل المستخدمين في الإرادة. إن استخدام تجزئة الملفات الكبيرة المتزامنة يعمل بشكل كبير على تحسين كفاءة تحميل الملفات.
1. وظيفة مقدمة
Sharding ، التزامن
يجمع Sharding and Concurrency لتقسيم ملف كبير إلى كتل متعددة وتحميل بشكل متزامن ، مما يحسن بشكل كبير من سرعة التحميل للملفات الكبيرة.
عندما تتسبب مشاكل الشبكة في أخطاء في الإرسال ، تحتاج فقط إلى إعادة إرسال Shard خطأ ، وليس الملف بأكمله. بالإضافة إلى ذلك ، يمكن لانتقال Shard تتبع التحميل أكثر في الوقت الحقيقي.
معاينة ، ضغط
يدعم تنسيقات الصور الشائعة JPG و JPEG و GIF و BMP و PNG معاينة وضغط لحفظ نقل بيانات الشبكة.
تحليل معلومات التعريف في JPEG ، والتعامل بشكل صحيح مع التوجهات المختلفة. في الوقت نفسه ، بعد الضغط ، قم بتحميل جميع بيانات META الأصلية للصورة والاحتفاظ بها.
أضف الملفات عبر قنوات متعددة
يدعم العديد من تحديد الملفات ، وتصفية النوع ، والسحب والإفلات (الملف والمجلد) ، ووظائف لصق الصور.
تنعكس وظيفة اللصق بشكل أساسي في حقيقة أنه عندما تكون هناك بيانات صورة في الحافظة (أدوات شاشة الشاشة مثل QQ (Ctrl + Alt + A) ، انقر بزر الماوس الأيمن على الصورة في صفحة الويب وانقر فوق نسخ) ، ويمكن لـ Ctrl + V إضافة ملف الصورة هذا.
HTML5 & Flash
متوافق مع المتصفحات السائدة والواجهات المتسقة وتنفيذ مجموعتين من دعم وقت التشغيل ، لذلك لا يحتاج المستخدمون إلى الاهتمام بما يتم استخدام النواة داخليًا.
في الوقت نفسه ، لا يقوم جزء Flash بأي عمل متعلق بـ UI ، وهو مريح للمستخدمين الذين لا يهتمون باحتياجات Flash التوسع والاحتياجات التجارية المخصصة.
MD5 ثواني تمريرة
عندما يكون حجم الملف كبيرًا والكمية كبيرة نسبيًا ، فإنه يدعم التحقق من قيمة MD5 قبل التحميل. إذا كان ثابتًا ، فيمكنك تخطيه مباشرة.
إذا قام الخادم والواجهة الأمامية بتعديل الخوارزمية بشكل موحد واتخاذ الجزء MD5 ، فيمكنه تحسين أداء التحقق بشكل كبير ويستغرق حوالي 20 مللي ثانية.
من السهل التوسع والقابل للفصل
يتم اعتماد الآلية القابلة للفصل لفصل الوظائف إلى عناصر واجهة مستخدم ويمكن مطابقتها بحرية.
يتم تنظيم الكود باستخدام مواصفات AMD ، وهو واضح وواضح ، مما يجعله مناسبًا للاعبين المتقدمين للتوسع.
تقديم الموارد
يتطلب تحميل الملفات باستخدام تحميل الويب تقديم ثلاثة موارد: JS ، CSS ، و SWF.
<!-تقديم CSS-> <Link Rel = "STYLESHEET" type = "text/css" href = "webuploader folder/webuploader.css"> <!-تقديم js-> <script type = "text/javaScript" src = "webuploader/webuploader" التهيئة وسيتم عرضها لاحقًا->
2. تحميل الملف
يحتوي 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>). appendto ($ li).ملف النجاح ومعالجة الفشل
إذا فشل تحميل الملف ، فسيتم إرسال حدث تحميل ، وإذا تم تحميل الملف بنجاح ، فسيتم إرسال حدث التحميل. بغض النظر عن النجاح أو الفشل ، سيتم تشغيل حدث UploadComplete بعد تحميل الملف.
TOPLOADER.ON ('UploadSuccess' ، function (file) {$ ('#'+file.id) .find ('p.state'). text ('exploaded') ؛}) ؛ Uploader.on ('Uploaderror' ، function (file) {$ ('#'+file.id) .find ('p.state'). 'UploadComplete' ، function (file) {$ ('#'+file.id) .find ('. progress'). fadeout () ؛}) ؛3. تحميل الصور
بالمقارنة مع تحميل الملفات العادية ، يوضح هذا العرض التوضيحي: تصفية الملفات ومعاينة الصور وتحميل ضغط الصورة وغيرها من الوظائف.
HTML
لتنفيذ العرض التوضيحي على النحو الوارد أعلاه ، تحتاج أولاً إلى إعداد زر وحاوية لتخزين قائمة معلومات الملف المضافة.
<!-جزء هيكل DOM-> <div id = "uploader-demo"> <!-يستخدم لتخزين العنصر-> <div id = "fileList"> </viv> <div id = "filepicker"> حدد الصور </div> </div>
جافا سكريبت
إنشاء مثيل تحميل الويب
. // حدد زر الملف.
استمع إلى الحدث FileQueued وإنشاء معاينة الصور من خلال تحميل. makethumb.
ملاحظة: ما تحصل عليه هنا هو بيانات URL للبيانات ، ولا تدعم IE6 و IE7 المعاينة المباشرة. يمكن إكمال المعاينة مع فلاش أو الخادم.
// عند إضافة ملف ، uploader.on ('fileQueued' ، function (file) {var $ li = $ ('<div id = "' + file.id + '" ) ؛ SRC) ؛ثم الباقي هو موجه حالة التحميل. عند تحميل عملية تحميل الملف ، يكون التحميل ناجحًا ، وفشل التحميل ، ويتم الانتهاء من التحميل ، يتم تحميل الأحداث على التوالي ، التحميل ، التحميل ، التحميل ، وتحميل الأحداث على التوالي.
// إنشاء شريط تقدم لعرضه في الوقت الفعلي أثناء تحميل الملف. exploader.on ('UploadProgress' ، function (file ، النسبة المئوية) {var $ li = $ ('#'+file.id) ، $ ٪ = $ li.find ('. progress span') ؛ $ في المئة. 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> </div>). الانتهاء ، هو ناجح أو فشل ، حذف شريط التقدم أولاً. Uploader.on ('UploadComplete' ، function (file) {$ ('#'+file.id) .find ('. progress'). remove () ؛}) ؛ما ورد أعلاه هو مقدمة حول كيفية استخدام المكون الإضافي لتحميل ملف تحميل الويب. آمل أن يكون ذلك مفيدًا لتعلم الجميع.