يعد إدخال ملف POOTSTRAP لتحميل ملفات الإدارة هو عنصر تحكم جيد في تحميل الملف ، ولكن لا توجد العديد من الحالات في البحث والاستخدام. عند استخدامه ، يمكنك أيضًا عبور النهر عن طريق لمس الحجر خطوة بخطوة. يتم تقديم عنصر التحكم هذا على الواجهة ، والتحميل الذي استخدمته من قبل أكثر جمالًا ولديه وظائف أكثر قوة. تعتمد هذه المقالة بشكل أساسي على حالة رمز الإطار الخاص بي ، حيث تقدم استخدام إدخال الملف ، ومكون تحميل الملف.
1. مقدمة لإدخال الملف لمكونه تحميل الملف
عنوان الصفحة الرئيسية لهذا المكون الإضافي هو: http://plugins.krajee.com/file-input. يمكنك رؤية الكثير من شاشات الرمز التجريبي من هنا: http://plugins.krajee.com/file-basic-use-demo.
هذا هو التحكم في إدخال ملف HTML5 المحسّن ، وتمديد Bootstrap 3.x ، وتنفيذ معاينة تحميل الملف ، وتحميل متعدد الملفات وغيرها من الوظائف.
بشكل عام ، نحتاج إلى تقديم الملفان التاليان لاستخدام المكون الإضافي بشكل طبيعي:
bootstrap-fileinput/css/fileinput.min.css
bootstrap-fileinput/js/fileinput.min.js
تأثير الواجهة البسيطة هو كما يلي. مثل العديد من عناصر تحكم ملفات التحميل ، يمكن أن تقبل أنواع مختلفة من الملفات. بالطبع ، يمكننا أيضًا تحديد نوع الملف المحدد والوظائف الأخرى المقبولة.
إذا كانت الثقافة الصينية تحتاج إلى مراعاة ، فيجب تقديم المستندات:
bootstrap-fileinput/js/fileinput_locale_zh.js
وبهذه الطريقة ، استنادًا إلى مجموعة حزم MVC ، يمكننا إضافة الملفات التي يحتاجونها إلى المجموعة.
// أضف دعمًا للتحكم في bootstrap-fileinput css_meteronic.include ("~/content/myplugins/bootstrap-fileinput/css/fileinput.min.css") ؛ js_meteronic.include ("~/content/myplugins/bootstrap-fileinput/js/fileinput.min.js") ؛ js_meteronic.include ("~/content/myplugins/bootstrap-fileinput/js/fileinput_locale_zh.js") ؛ js_meteronic.include ("~/content/myplugins/bootstrap-fileinput/js/fileinput_locale_zh.js") ؛وبهذه الطريقة ، يمكننا تقديم وصف الواجهة الصينية والمطالبات على الصفحة ، كما هو موضح في الواجهة التالية.
2. استخدام إدخال الملف لتحميل الملف
بشكل عام ، يمكننا تحديد وظيفة JS العامة لتهيئة عنصر تحكم المكون الإضافي هذا ، كما هو موضح في رمز وظيفة JS التالي.
// تهيئة وظيفة التحكم في FileInput (التهيئة الأولى) initFileInput (ctrlname ، uploadurl) {var control = $ ('#' + ctrlname) ؛ control.fileInput ({language: 'Zh' ، // قم بتعيين تحميل اللغة: exploadurl ، // addring addressionsextensions: ['jpg' ، 'png' ، 'gif'] ، // Button Style PreviewFileicon: "<i class = 'glyphicon glyphicon-king'> </i>" ،}) ؛}في رمز الصفحة ، نضع عنصر تحكم في تحميل الملف ، كما هو موضح في الكود التالي.
<div style = "height: 500px"> <input id = "file-portrait1" type = "file"> </viv>
وبهذه الطريقة ، فإن رمز التهيئة لرمز البرنامج النصي الخاص بنا هو كما يلي:
.
هذا يكمل تهيئة التحكم. إذا كنا بحاجة إلى تحميل ملف ، فسنحتاج أيضًا إلى رمز JS للتعامل مع الأحداث التي تم تحميلها بواسطة العميل ، ونحتاج أيضًا إلى وحدة تحكم خلفية MVC للتعامل مع عملية حفظ الملف.
على سبيل المثال ، رمز حفظ بيانات النموذج الخاص بي هو كما يلي.
// إضافة سجل formValidate ("ffadd" ، الدالة (النموذج) {$ ("#add"). modal ("Hide") ؛ // إرسال معلمات البناء إلى الخلفية var postdata = $ ( // إضافة Portrait Processing InitPortrait (Data.data1) ؛ }). error (function () {showtips ( }) ؛من بينها ، لاحظنا جزء رمز منطق المعالجة من حفظ الملف:
// أضف معالجة التحميل لـ Portrait initPorTrait (data.data1) ؛ // استخدم المعرف المكتوب لتحديث $ ('#file-portrait'). fileInput ('expload') ؛يتمثل السطر الأول من التعليمات البرمجية في إعادة إنشاء محتوى إضافي تم تحميله ، مثل معلومات معرف المستخدم ، حتى نتمكن من إنشاء بعض البيانات الإضافية بناءً على هذه المعرفات لتحميل الخلفية ومعالجتها.
تقوم هذه الوظيفة بشكل أساسي بإعادة تعيين المعرف لتسهيل اكتساب أحدث المعلمات الإضافية عند التحميل. هذا هو نفس وضع تحميل المعالجة.
// تهيئة وظيفة معلومات الصورة initPorTrait (ctrlname ، id) {var control = $ ('#' + ctrlname) ؛ var imageurl = '/picturealbum/getPorTrait؟ id =' + id + '& r =' + math.random () ؛ // مهم ، من الضروري تحديث محتوى المعلمة الإضافي لعنصر التحكم ، وعرض تهيئة الصورة control.fileInput ('Refresh' ، {uploadextradata: {id: id} ، initialPreview: [// معاينة إعدادات الصورة "<img src = ' }) ؛ }كما رأينا سابقًا ، فإن العنوان الذي قمت بتحميله هو: "/user/editPorTrait". سأعلن أيضًا عن وظيفة الخلفية هذه ، على أمل أن يمنحك رمز حالة كامل للتعلم.
/// <summary> /// upload user avatar image /// </summary> /// <param name = "id"> معرف المستخدم </param> /// </إرجاع> الإرجاع العام editportrait (int id) {commonResult result = new CommonResult () ؛ حاول {var files = request.files ؛ if (files! = null && files.count> 0) {userInfo info = bllfactory <Seter> .instance.findbyid (id) ؛ if (info! = null) {var fileData = ReadFileBytes (files [0]) ؛ result.success = bllfactory <Ser> .instance.upDatePersonImagebytes (userImageType.PersonPortrait ، id ، filedata) ؛ }}} catch (استثناء ex) {result.errormessage = ex.message ؛ } إرجاع tojsoncontent (نتيجة) ؛ }وبهذه الطريقة ، قمنا ببناء منطق حفظ صورة المستخدم أعلاه ومعالجته ، ويمكن حفظ الملفات بشكل طبيعي في نظام ملفات الخلفية ، وفي الوقت نفسه ، يتم تسجيل بعض المعلومات اللازمة في قاعدة البيانات.
بالطبع ، بالإضافة إلى استخدامه لمعالجة صور صورة المستخدم ، يمكننا أيضًا استخدامها لإنشاء عمليات معالجة ألبوم الصور. الواجهة المحددة كما يلي.
رمز التهيئة لهذا الجزء كما يلي:
// تهيئة عنصر تحكم FileInput (التهيئة الأولى) $ ('#ملف الملف') "multipart/form-data" ، showupload: true ، // هل عرض زر التحميل: false ، // هل متصفح متصفح العنوان: "btn btn-primary" ، // button style style serealiCon: "<i class = 'glyphicon glyphicon' ({n}) يتجاوز الحد الأقصى المسموح به القيمة {m}! "،}) ؛ما سبق هو التفسير التفصيلي لتجربة إطار تطوير Metronic Bootstrap الذي قدمه المحرر لك [خمسة] تم شرح استخدام المكون الإضافي لملف ملفات ملفات bootstrap بالتفصيل. آمل أن يكون ذلك مفيدًا للجميع. إذا كنت تريد معرفة المزيد من المعلومات ، فيرجى الانتباه إلى موقع Wulin.com!