مقدمة إلى plupload
تم تطوير PLUPLOAD من قبل مطوري Tinymce ، مما يوفر مكونًا إضافيًا متاحًا للغاية لنظام إدارة المحتوى الخاص بك أو برامج التحميل المماثلة. يتم تقسيم PluPload حاليًا إلى API الأساسي ومكون قائمة انتظار تحميل jQuery ، والذي يتيح لك استخدامه مباشرة أو تخصيصه بنفسك.
1. عرض التأثير
بما في ذلك لوحة تحميل الملف وقائمة تحميل الملفات
2. مقدمة
بعبارة قصيرة ، يتم استخدام springmvc mybatis maven mysql لتحقيق وظيفة التحميل متعدد الملفات ، ويستخدم التنزيل شكل التدفقات.
سأفتح مدونة أخرى لتقديم الصفحات المعنية.
3. إعداد المواد
plupload
Artdialog
يوجد أيضًا ملف JS يهيئة المكون الإضافي
يمكن تنزيلها مباشرة من اتصال المشاركة الخاص بي
الرابط: http://pan.baidu.com/s/1c27ctak كلمة المرور: BTQJ
هناك أيضا تنزيل jQuery
4. رمز مكتب الاستقبال
تقديم أنماط وملفات JS
<link rel = "stylesheet" href = "resources/css/plupload.css" type = "text/css"> <script src = "resources/js/jquery.min.js src = "الموارد/atrdialog4.1.7/atrdialog.source.js؟ skin = blue"> </script> <script src = "resources/js/upload.js"> </script>
رمز JS
_plupload (uuid uuid ، مسار تحميل الملف) ؛ ① فيما يتعلق بالمراس ، اسمحوا لي أن أعطي مثالاً. معرف المستخدم الحالي هو UUID. يمكنك ربط معرف المستخدم بالملف الذي تقوم بتحميله. إذا قمت بالاستعلام في المستقبل ، فيمكنك الاستعلام عن جميع الملفات التي تم تحميلها بواسطة معرف المستخدم وفقًا لمعرف المستخدم. ② يتم تغليف هذه الطريقة ويمكن رؤيتها في upload.js. التعليقات في مقالتي واضحة للغاية ، ويمكنك أيضًا الرجوع إلى المستند الرسمي.
$ (function () {3 $ ('#uploadbtn'). انقر فوق (function () {popupdialog () ؛}) ؛ _plupload ('test' ، '$ {pagecontext.request.contextpath}/uploadfile') ؛}) ؛رمز الصفحة ، زر ، مربع منبثق
<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) ؛
5. رمز الخلفية
ليس لدي طريقة لتغليفها ، لذلك يمكنني تغليفها بنفسي من أجل رؤيتها بوضوح
/ ** * عنوان طلب تحميل الملف * * param طلب * param استجابة */ @requestmapping ("uploadfile") تحميل الفراغ العام (طلب httpservletrequest ، httpservletresponse) (commonsmultipartfile) multipartrequest.getFile ("file") ؛ // الحصول على سلسلة ملف unid = uuid.randomuuid (). string.valueof (file.getSize ()) ؛/* size file*/ string path = null ؛/* مسار تخزين الملف*/ string punid = request.getParameter ("punid") ؛ ! SimplEdateFormat SDF = جديد spiStFormat ("/yyyy/mm/dd/") ؛ String subpath = sdf.format (Date ()) ؛ path = basepath + subpath + unid + file.separator + OriginalFilename ؛ // إذا لم يكن المجلد موجودًا ، فقم بإنشاء ملف مجلد dir = ملف جديد (مسار) ؛ if (! dir.exists ()) {dir.mkdir () ؛ } file.transferto (dir) ؛ } catch (استثناء e) {E.PrintStackTrace () ؛ }} // تحويل حجم الملف Long kb = 1024 ؛ طويل mb = kb * 1024 ؛ GB طويل = MB * 1024 ؛ حجم طويل = long.parselong (fliesize) ؛ if (size> = gb) {fliesize = string.format ("٪. 1f gb" ، (float) size / gb) ؛ } آخر إذا (size> = mb) {float f = (float) size / mb ؛ fliesize = string.format (f> 100؟ "٪ .0f mb": "٪ .1f mb" ، f) ؛ } آخر إذا (size> = kb) {float f = (float) size / kb ؛ fliesize = string.format (f> 100؟ "٪ .0f kb": "٪ .1f kb" ، f) ؛ } آخر {fliesize = string.format ("٪ d b" ، الحجم) ؛ } // تخزين معلومات الملف في قاعدة البيانات fileUpload fileUpload = new FileUpload () ؛ fileUpload.setUnid (unid) ؛ fileupload.setoriginalfilename (OriginalFilename) ؛ fileUpload.setFliesize (fliesize) ؛ fileUpload.setPath (path) ؛ fileUpload.setPunid (punid) ؛ SimplEdateFormat df = new SimpleDateFormat ("Yyyy-MM-DD HH: MM: SS") ؛ fileupload.setflietime (df.format (New Date ())) ؛ fileUploadService.insert (fileUpload) ؛ }هنا تأتي طريقة تنزيل ، وهي استخدام تدفقات الملفات للتنزيل وفقًا لمعرف الملف
@requestmapping ("downloadFile") public void downloadfile (request httpservletrequest ، httpservletresponse stretion) {string unid = request.getParameter ("unid") ؛ fileUpload fileUpload = fileUploadService.SelectByPrimaryKey (unid) ؛ if (fileUpload! = null) {try {String filename = new string (fileUpload.getOriginalFilename (). getBytes ("GBK") ، "ISO-8859-1") ؛ string path = fileupload.getPath () ؛ استجابة. setcharacterencoding ("UTF-8") ؛ استجابة. استجابة. Response.Setheader ("طول المحتوى" ، fileUpload.getFliesize ()) ؛ inputStream inputStream = جديد fileInputStream (ملف جديد (مسار)) ؛ OutputStream OS = response.getOutputStream () ؛ بايت [] ب = بايت جديد [2048] ؛ طول int بينما ((طول = inputStream.Read (b))> 0) {os.write (b ، 0 ، length) ؛ } os.close () ؛ inputStream.Close () ؛ } catch (fileNotFoundException e) {e.printStackTrace () ؛ } catch (ioException e) {E.PrintStackTrace () ؛ }}}هناك أيضًا طريقة لحذفها
/ ** * حذف الملف * * @param request * param استجابة */ responseBody RquestMapping ("delfile") الخريطة العامة <string ، object> defile (httpservletrequest request ، htttpservletponse response) {string unid = request.getParameter ("unid") ؛ fileUpload fileUpload = fileUploadService.SelectByPrimaryKey (unid) ؛ // حذف العلم المنطقي المحلي = خطأ ؛ ملف الملف = ملف جديد (fileUpload.getPath ()) ؛ if (file.exists ()) {// إذا كان المسار ملفًا ولم يكن فارغًا ، حذف flag = file.delete () ؛ } // حذف قاعدة البيانات int = fileuploadservice.deleteByPrimaryKey (unid) ؛ if (result> 0) {flag = true ؛ } Map <String ، Object> map = new HashMap <string ، Object> () ؛ map.put ("النتيجة" ، العلم) ؛ خريطة العودة }ما سبق هو Artdialog+plupload الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!