لقد انخرت مؤخرًا. لقد لخصت بعض الاستخدامات الشائعة لمكونات fileInput bootstrap. سأشاركها مع منصة شبكة Wulin للرجوع إليها ، كما أنها مريحة للبحث المستقبلي. أرجوك سامحني على الكتابة السيئة لهذا المقال.
1. عرض التأثير
1. نوع الإدخال الأصلي = "الملف" أمر لا يطاق للنظر إليه.
2. fileInput bootstrap دون أي زخرفة: (التطور الأساسي لملفات bootstrap)
3. التطور المتقدم لـ Bootstrap FileInput: الثقافة الصينية ، وتحميل السحب والإفلات ، والتحقق من تمديد الملف (إذا لم يكن الملف مطلوبًا ، فلن يتم تحميله)
سحب وانخفاض التحميل
التحميل
4. Bootstrap FileInput Eltimate Evolution: يسمح بتحميل ملفات متعددة في نفس الوقت بواسطة مؤشرات ترابط متعددة.
التحميل
بعد اكتمال التحميل
2. أمثلة رمز
ماذا عن ذلك؟ ما مدى فعالية؟ لا تقلق ، سنحقق النتائج المذكورة أعلاه خطوة بخطوة.
1. صفحة CSHTML
أولاً ، قدم ملفات JS و CSS المطلوبة.
// bootstrap fileInputBundles.add (ScriptBundle جديد ("~/content/bootstrap-fileinput/js") stylebundle ("~/content/bootstrap-fileinput/css").ثم حدد علامة الإدخال = 'file'
<Porm> <div id = "mymodal" tabIndex = "-1" "aled =" dialog "aria-labelledby =" mymodallabel "> <div reb =" div> <viv> <button type = "button" data-dismiss = "modal" aria-label = "cloot" id = "mymodallabel"> يرجى تحديد ملف excel </h4> </viv> <viv> <div> <a href = "~/data/exceltemplate/order.xlsx" style = "border: none ؛
ركز على هذه الجملة:
<type type = "file" name = "txt_file" id = "txt_file" multives />
يعني أنه يُسمح بتحميل ملفات متعددة في نفس الوقت ، وأن class = "تحميل الملفات" يعني نمط العلامة.
2. تهيئة JS
$ (function () {// 0. تهيئة fileInputvar OfileInput = new FileInput () ؛ OfileInpt.init ("txt_file" ، "/api/orderapi/importOrder") ؛}) ؛ // تهيئة fileInputvar fileInput = function () UploadUrl) {var control = $ ('#' + ctrlname) ؛ // تهيئة نمط التحميل control.fileInput ({language: 'zh' ، // قم بتعيين language uploadurl: uploadurl ، Showcaption: false ، // هل متصفح المستعرض العنوان: "btn btn-primary" ، // button style // dropzoneenabled: false ، // هل مساحة السحب // minimagewidth: 50 ، // minimagewidth of the picture // minimageHight: 50 ، // الحد الأدنى من ارتفاع الصورة // Picture // Maximageheight: 1000 ، // أقصى ارتفاع للصورة // maxfilesize: 0 ، // الوحدة هي KB. صحيح ، المعاينة: "<i class = 'glyphicon glyphicon-king'> </i>" ، msgfilestoomany: "حدد عدد الملفات التي تم تحميلها ({n}) يتجاوز الحد الأقصى للقيمة المسموح بها {m}!" ،}) ؛ معاينة ، فهرس) {$ ("#mymodal"). Modal ("Hide") ؛ var data.response.lstorderimport ؛ if (data == undefined) {toastr.error ('نوع تنسيق الملف غير صحيح') ؛ return ؛} // 1. tableInit () ؛ otable.init (data) ؛ $ ("#div_startimport"). show () ؛}) ؛} إرجاع Ofile ؛} ؛يوضح:
(1) يتم تمرير طريقة FileInput () في بيانات JSON ، والتي لها العديد من السمات. تمثل كل سمة الخصائص عند تهيئة التحكم في التحميل. إذا لم يتم تعيين أي من هذه السمات ، فهذا يعني أنه يتم استخدام الإعدادات الافتراضية. إذا كنت تريد أن ترى الخصائص الموجودة بداخلها ، فيمكنك فتح رمز المصدر لـ FileInput.js ، كما هو موضح في نهاية الأمر:
إذا لم يتم تعيين هذه الخصائص على وجه التحديد ، فسيتم استخدام القيم الافتراضية.
(2) $ ("#txt_file"). on ("fileUploaded" ، الدالة (الحدث ، البيانات ، المعاينة ، الفهرس) {} تسجل هذه الطريقة حدث رد الاتصال بعد التحميل. وهذا هو ، بعد معالجة الملف الذي تم تحميله في اليوم بعد اليوم بعد معالجته.
3. الطرق المقابلة للخلفية ج#
هل تتذكر أن هناك عنوان URL للمعلمة في طريقة التحكم في التهيئة FileInput () في JS؟ تشير القيمة المقابلة لعنوان URL هذا إلى طريقة المعالجة المقابلة لـ C# بعد اليوم. أو نشر طريقة معالجة الخلفية.
[ActionName ("ImportOrder")] الكائن العام isordorder () {var ofile = httpcontext.current.request.files ["TXT_FILE x.order_no) .toList () ؛ var lsttmodel = modelManager.find () ؛ var lsttmaterial = materialManager.find () ؛ // var imax_import_index = lstexistorder.max (x => x.import_index) ؛ 0: imax_import_index.value ؛#endregion#المنطقة 1. احصل على كائن المصنف من خلال Stream iWorkbook Workbook = null ؛ if (forile.filename.endswith (". xssfworkbook (forile.inputStream) ؛} إذا (workbook == null) {return new {} ؛} // ............نظرًا لأن مشروع المدون هو تحميل Excel ، يتم استخدام منطق NPOI هنا. إذا قمت بتحميل الصور والملفات الأخرى ، فيمكنك استخدام GDI لمعالجة الصور.
4. قم بتحميل ملفات متعددة في نفس الوقت
عند تحميل ملفات متعددة في نفس الوقت ، سيرسل مكتب الاستقبال طلبات غير متزامنة متعددة إلى الخلفية. وهذا يعني أنه عند تحميل ثلاثة ملفات في نفس الوقت ، ستدخل طريقة الاستيراد في الخلفية ثلاث مرات. يتيح لك ذلك معالجة ثلاثة ملفات في نفس الوقت باستخدام مؤشرات ترابط متعددة.
3. ملخص
يتم تقديم الاستخدام الأساسي لـ bootstrap fileInput تقريبًا. في الواقع ، إنه مكون تم تحميله ولا توجد استخدامات متقدمة. المفتاح هو جعل الواجهة أكثر ودية وزيادة تجربة المستخدم.
سأقدم لك الكثير حول استخدام مكونات تحميل ملفات fileInput Bootstrap. آمل أن يكون ذلك مفيدًا لك!