تصف هذه المقالة طريقة تحميل ملفات متعددة والحد من عدد الملفات في SWFUPload. شاركه للرجوع إليه ، على النحو التالي:
SWFUPLOAD هو مكون تحميل ملف عميل يعتمد على الفلاش وجافا سكريبت.
معالجات
إكمال قائمة انتظار الملف (filequeued) →
أكمل اختيار الملف (FileDialogComplete) → بدء التحميل (exploadStart) → تحميل المعالجة (UploadProgress) → تحميل النجاح (التحميل) → تحميل التحميل (uploadcomplete) →
QueUeComplete
كما هو موضح أعلاه ، إذا تم تنفيذ وظائف رد الاتصال أعلاه بالتسلسل مع ملفات محددة ، تجدر الإشارة إلى أنه يتم تحديد ملفات متعددة. سيتم تنفيذ FileQueued و QueUeComplete مرة واحدة فقط ، في حين سيتم تنفيذ FileDialogComplet ... → UploadComplete مرة واحدة لكل ملف.
بعد الانتهاء من الوظائف الأساسية مع الإشارة إلى المثال الرسمي ، يعتمد التقليد Ganji طريقة IFRAME.
من أجل تحقيق الحد الأقصى لعدد معاينة الصورة المصغرة وعدد الصور المحذوفة وتحميلها
عرض الصور المصغرة ، وإنشاء أزرار لحذف الصور المصغرة ،
يعرض Thumbimages divs من الصور المصغرة لصفحة الوالدين
SRC_S هو عنوان الصورة المصغرة التي تم إنشاؤها
SRC_B هو عنوان الصورة الأصلي
ServerData هي البيانات التي يتم إرجاعها بواسطة صفحة معالجة تحميل الصورة. سيتم إرجاعه بتنسيق النجاح | عنوان Thumbnail | العنوان الأصلي | العنوان الأصلي
دالة uploadsuccess (ملف ، serverData) {try {var result = serverData.split ('|') ؛ if (result [0]! = 'Success') {var progress = new fileProgress (file ، this.customStings.ProgressTarget) ؛ Progress.seterror () ؛ Progress.setStatus (serverData) ؛ Progress.Togglecancel (false) ؛ } else {var progress = new fileProgress (ملف ، this.customSettings.ProgressTarget) ؛ Progress.setComplete () ؛ Progress.setStatus ("تحميل كامل") ؛ Progress.Togglecancel (false) ؛ var img_url_s = النتيجة [1] ؛ var img_url_b = النتيجة [2] ؛ AddImage (img_url_s ، img_url_b) ؛ }} catch (ex) {this.debug (ex) ؛ }} دالة addimage (src_s ، src_b) {var newdiv = parent.document.createElement ("div") ؛ newdiv.style.margin = "5px" ؛ newdiv.style.height = "60px" ؛ newdiv.style.width = "80px" ؛ newdiv.style.border = "1px Solid #7f9db9" ؛ newdiv.style.cssfloat = "left" ؛ newdiv.style.stylefloat = "left" ؛ newdiv.style.position = "النسبية" ؛ var newa = parent.document.createElement ("a") ؛ newa.className = "delete" ؛ newa.title = "delete" ؛ newa.href = "javaScript ::" ؛ newa.onclick = function () {deldiv (newDiv) ؛} ؛ var newinput_s = parent.document.createElement ("input") ؛ newInput_s.type = "Hidden" ؛ newInput_s.value = src_s ؛ newInput_s.name = "image_s []" ؛ newa.appendchild (newInput_S) ؛ var newinput_b = parent.document.createElement ("input") ؛ newInput_B.Type = "Hidden" ؛ newinput_b.value = src_b ؛ newinput_b.name = "image_b []" ؛ newa.appendchild (newInput_B) ؛ var newimgdiv = parent.document.createElement ("div") ؛ var newimg = parent.document.createElement ("img") ؛ newimg.style.height = "60px" ؛ newimg.style.width = "80px" ؛ newimgdiv.appendchild (NewImg) ؛ Newdiv.AppendChild (NewImgDiv) ؛ Newdiv.AppendChild (Newa) ؛ parent.document.getElementById ("thumbimages"). AppendChild (NewDiv) ؛ if (newimg.filters) {try {newimg.filters.item ("dimixagetransform.microsoft.alpha"). opacity = 0 ؛ } catch (e) {// إذا لم يتم تعيينه في البداية ، فإن المتصفح سوف يرمي خطأ. سيؤدي ذلك إلى تعيينه إذا لم يتم تعيينه بعد. newimg.style.filter = 'progId: dximageTransform.microsoft.alpha (opacity =' + 0 + ')' ؛ }} else {newimg.style.opacity = 0 ؛ } newimg.onload = function () {fadein (newImg ، 0) ؛ } ؛ newimg.src = src_s ؛} وظيفة fadein (العنصر ، التعتيم) {var reditOpacityby = 5 ؛ معدل var = 30 ؛ // 15 إطارًا في الثانية إذا (التعتيم <100) {opacity += redupacityby ؛ if (عتامة> 100) {opacity = 100 ؛ } if (element.filters) {try {element.filters.item ("dimixageTransform.microsoft.alpha"). opacity = opacity ؛ } catch (e) {// إذا لم يتم تعيينه في البداية ، فإن المتصفح سوف يرمي خطأ. سيؤدي ذلك إلى تعيينه إذا لم يتم تعيينه بعد. element.style.filter = 'progId: dximageTransform.Microsoft.alpha (opacity =' + opacity + ')' ؛ }} else {element.style.opacity = extabity / 100 ؛ }} if (التعتيم <100) {setTimeOut (function () {fadein (العنصر ، التعتيم) ؛} ، معدل) ؛ }}فيما يتعلق بمعالجة العدد المتبقي من الملفات التي تم تحميلها
وظيفة QueUeComplete (numFilesUploaded) {this.setButTondisabled (false) ؛ var stats = this.getStats () ؛ var status = document.getElementById ("divstatus") ؛ الحالة. // SWFU انظر SWFU في صفحة iframe swfu = new swfupload (الإعدادات) ؛ var stats = swfu.getStats () ؛ Stats.successful_uploads-- ؛ swfu.setstats (الإحصائيات) ؛ var status = document.getElementById ("divstatus") ؛ الحالة.قد يكون ذلك بسبب استخدام iframe
لا يمكن استبدال SWFU في وظيفة Deldiv بهذا
التأثير الكلي كما هو موضح في الشكل:
بعد تحميل الصورة وتعديل المعلومات مرة أخرى ، تحتاج إلى الحصول على عدد الصور التي تم تحميلها ودمجها في swfupload
احصل على مسار الصورة المحمّل من الخلفية من خلال PHP ، وقم بمنحه لصفيف JS من خلال Smarty
var img_arr = new array () ؛ {if isset ($ img_arr)} {section name = 'img_arr' loop = $ img_arr} img_arr [{$ smarty.section.img_arr.index}] = جديد Array ('{$ img_arr [img_arr] .images_s}' ، '{$ img_arr [img_arr] .images_b}') ؛ {/section} {/if}الاستعلام عن وثيقة swfupload للحصول على المعلومات التالية
FlashReady ()
وظيفة الحدث هذه هي حدث داخلي ولا يمكن إعادة كتابته. يتم تشغيل هذا الحدث عندما يتم إنشاء مثيل لـ SWFupload ويكمل الفلاش المحمّل جميع عمليات التهيئة.
تذكير: swfupload_loaded_handler في الإعدادات المقابلة
لذا قم بتعيين swfupload_loaded_handler في إعدادات swfupload
swfupload_loaded_handler: تم تحميله ،
ثم حدد الوظيفة المحملة في المعالجات
وظيفة loaded () {if (img_arr.length! = 0) {for (val in img_arr) {addimagefromdb (img_arr [val] [0] ، img_arr [val] [1] ، this) ؛ }}}اتصل بوظيفة AddImageFromDB لتعديل عدد الصور التي تم تحميلها وإنشاء صور مصغرة من الصور التي تم تحميلها
// تهيئة وظيفة الصورة التي تم تحميلها addimagefromdb (src_s ، src_b ، swfu) {var stats = swfu.getstats () ؛ Stats.successful_uploads ++ ؛ swfu.setstats (الإحصائيات) ؛ var status = document.getElementById ("divstatus") ؛ الحالة. addimage (SRC_S ، SRC_B) ؛}لمزيد من المعلومات حول المحتوى المتعلق بـ javaScript ، يرجى مراجعة موضوعات هذا الموقع: "ملخص لتأثيرات وتقنيات تبديل JavaScript" ، "ملخص لمهارات خوارزمية بحث JavaScript" ، "ملخص لتأثيرات الرسوم المتحركة JavaScript و Techniques و" ملخص ". خوارزميات وتقنيات JavaScript Traversal "، و" ملخص استخدام العمليات الرياضية JavaScript "
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.