قبل تقديم النص الرئيسي ، اسمحوا لي أن أقدم معرفة plupload.
مقدمة إلى plupload
تم تطوير PLUPLOAD من قبل مطوري Tinymce ، مما يوفر مكونًا إضافيًا متاحًا للغاية لنظام إدارة المحتوى الخاص بك أو برامج التحميل المماثلة. يتم تقسيم PluPload حاليًا إلى API الأساسي ومكون قائمة انتظار تحميل jQuery ، والذي يتيح لك استخدامه مباشرة أو تخصيصه بنفسك.
ميزة plupload
يستخدم PluPload مكونات jQuery كمكون قائمة انتظار لتحديد الملفات وتحميل الملفات.
يستخدم Plupload Flash و Silverlight و HTML5 و Gears و BrowserPlus و FileUpload لتحميل محركات تكنولوجيا الملفات.
يسمح PLUPLOAD بالتخصيص باستخدام واجهة برمجة تطبيقات CORE PLUPLOAD لتحديد الملفات وتحميل الملفات.
يتم استخدام JavaScript لتنشيط مربع حوار تحديد الملف. يمكن تعيين مربع حوار تحديد الملف هذا للسماح للمستخدمين بتحديد ملف منفصل أو ملفات متعددة. يمكن أيضًا تقييد نوع الملف المحدد ، بحيث يمكن للمستخدم تحديد الملف المناسب المحدد فقط ، مثل JGP ؛ GIF.
يتيح plupload تخصيص بعض الأحداث أثناء عملية التحميل وكتابة طريقة المعالجة الخاصة بها.
تحميل الملف المحدد مستقل عن الصفحة والشكل الذي يوجد فيه. يتم تحميل كل ملف بشكل منفصل ، مما يضمن أن البرنامج النصي من جانب الخادم يمكنه التعامل مع ملف واحد بسهولة أكبر في وقت واحد. للحصول على معلومات محددة ، يرجى زيارة الموقع الرسمي لـ plupload: http://www.plupload.com/
الخلفية: تم تحميل التحكم في تحميل الملف الأمامي المستخدم في المشروع ، وكان كل شيء سلمي لفترة من الوقت. جاءت "الأخبار السارة" من المشهد ، وأراد العميل استخدام نظام iPad وأراد تحميل الصور. صفع سيد العميل جبهته واضطر إلى العمل الإضافي في البحث والتطوير. كما تعلمون جميعًا ، يعتمد التحميل على الفلاش ، لذلك لا يمكن أن يكون ذلك على أنظمة iOS و Mac. لذلك ، بعد بعض Google ، وجدت plupload. من الأسهل البدء.
رمز HTML صفحة:
تحتوي علامة الرأس على ملفات JS اللازمة
<script type = "text/javaScript" src = "js/jquery -1.9.1.min.js">/script>
<!-مربع حوار الفن->
<script type = "text/javaScript" src = "ArtDialog/ArtDialog.source.js؟ Skin = Blue"> </script>
<!-plupload->
<script type = "text/javaScript" src = "plupload/plupload.full.js"> </script>
عناصر الصفحة في علامة الجسم
<!-قم بإثارة مربع المنبثقة-> <a id = "uploadbtn" href = "#"> تحميل الملف </a> <div id = "uploadcontent" style = "display: none ؛ height: 300px ؛ overflow-x: hidden ؛ overflow-y: auto ؛ id = "uploadify" href = "javaScript: void (0) ؛
رمز في علامة البرنامج النصي
var globaluploader ؛ function _plupload () {var uploader = new plupload.uploader (} browser_button: '/UploadAction !localupload.action''s' ، "100mb" ، // الحد من التحميل حجم الملف mime_types: [// الحد من نوع ملف التحميل {title: "ملفات الصور" ، الامتدادات: "jpg ، gif ، png"}]} ، init: {postInit: function () {$ ('#oploadfilequeue'). html ('') بعد التحميل} ، قبل أن يكون هناك دالة (UP ، ملف) {// بشكل متكرر قبل التحميل بعد النقر فوق الزر. $ .ajax ({url: "/folder/personalace! {upfilename: data.newfilename ، upfiletype: file.name.split (".") [file.name.split (".") ErrorthRown) {messagealert ("آسف ، File ["+file.name+"] فشل في التحميل" ، '') ؛ // $ ('#exploadify'). Uploadify ('cancel' ، file.id) ؛ ID}}) ؛} ، href = "javaScript: _plupload_removefile (' +i +' ، ' +file.id +')"> </a> </viv> <span> ' +file.name +' (' +plupload.formatsize (file.size) + ') </span> <b> </b> <viv> <viv> </viv> </viv> </viv> </viv>') ؛ i ++ ؛}) ؛} ، uploadprogress: function (up ، file) {// انقر لبدء التحميل والتشغيل. هنا يمكنك إضافة شريط تقدم ، باستخدام file.percentdocument.getElementById (file.id) .getElementsByTagName ('b') '٪') ؛ // progress bar} ، error: function (up ، err) {// error trigger document.getElementById ('console'). innerhtml + = "/nerror#" + err.code + ":" + err.message ؛ hearloaded.data = eval ("(" + info.response + ")") ؛ // البيانات التي يتم إرجاعها بواسطة الخادم ، يمكنك تعديل قائمة الملفات في الصفحة ، إلخ. uploader ؛} function popupdialog () {ArtDialog ({id: 'file-upload' ، title: 'file epload' ، fixed: true ، lock: true ، content: $ ("#uploadContent") [0] ، button: [{{start upload '، focus: true ، callback: function () "Close" ، Callback: Function () {$ ('#uploadfilequeue'). function () {$ ('#uploadfilequeue'). html ('') Queue}}) ؛} $ (function () {$ ('#uploadbtn'). انقر فوق (function () {popupdialog () ؛}) ؛ _ plupload () ؛}) ؛لن أكتب رمز الخلفية. لقد استخدمت الإجراء الخلفي Struts2 لتلقي الملف المستلم باستخدام ملف الملف الخاص. تغيير الاسم الآخر إلى NULL. لا أعرف كيفية تعيين هذه القيمة في عنصر التحكم حتى الآن.
ثم هذا هو التأثير
إذا كنت ترغب في إضافة أنماط CSS هذه إلى شريط التقدم ، فلديك تحكم
<type type = "text/css"> #exploadfilequeue {الموضع: النسبية ؛ اليسار: 0 ؛ أعلى: 0 ؛ الحدود: 1px solid #a7c5e2 ؛ margin-bottom: 5px ؛ الارتفاع: 228px ؛ العرض: 350px ؛ overflow-x: hidden ؛ verflow-y: auto-}. */خلفية اللون: #fff ؛ -webkit-border-radius: 3px ؛ الحدود radius: 3px ؛ الخط: 11px verdana ، جنيف ، sans-serif ؛/* margin-top: 5px ؛ */margin: 5px 5px 5px 5px ؛ max-width: 350px ؛ padding: 10px ؛}. التحميل-progress {background-color: #e5e5e5 ؛ margin-top: 10px ؛ width: 100 ٪ ؛}. 1px ؛} </style>التأثير النهائي. ماذا ، أريد أيضًا تحميل الملف لحذف الملف في شوكة قائمة الانتظار ، حسنًا
أضف هذا بأسلوب
.uploadify-queue-item .cancel a {background: url ('js/eploadify-cancel.png') 0 0 no-repeat ؛ float: right ؛ الارتفاع: 16px ؛بالطبع ، تحتاج أيضًا إلى إضافة رمز JS المحذوف. هناك إزالة (ملف) في واجهة برمجة التطبيقات الرسمية هنا ، لكن ليس من السهل استخدامه هنا. لذلك يتم استخدام طريقة أخرى لتقسيم (NUM ، الطول) ، يتم حذف NUM من الأول ، والطول هو عدد الحذف.
الدالة _plupload_removefile (removenum ، fileId) {globaluploader.files.splice (Removenum ، 1) ؛ // حذف بعض الملفات $ (fileId) .fadeout () ؛}التأثير النهائي.
ما سبق هو plupload+artdialog الذي قدمه لك المحرر لتحقيق ملفات تحميل متعددة المنصات. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!