استخدام plugin upload في bootstrap fileinput الأساسي

مقدمة:

المنشورات الثلاثة السابقة شرحت بعض الاستخدامات الشائعة لـ bootstrap table، ووجد أن الباحث يبدو مفتونًا بهذا النمط المسطح. قبل يومين، كنت أعمل على وظيفة استيراد Excel، وأستخدمت العنصر الأصلي input type='file'، وكانت النتيجة غير مقبولة، لذا قرر الباحث العثور على مكون تحميل جيد لتبديله. بما أن bootstrap مفتوح المصدر، فإن المجتمع يحتوي بالتأكيد على العديد من المكونات المتعلقة به، بما في ذلك مكون التحميل الشائع هذا. بعد البحث المتبين، لم يضيع الباحث جهده، وقد تم العثور على هذا المكون: bootstrap fileinput. حول تطبيق هذا المكون ببساطة، بناءً على خبرة BootStrap Metronic Development Framework Experience Summary [V] Detailed Explanation of the Usage of Bootstrap File Input File Upload Plugin، ولكن لم يتم تناول العديد من التفاصيل، لذا قام الباحث بتلخيص بعض الاستخدامات الشائعة لهذا المكون بينما كان يعمل على مهمة التطوير، مما يعتبر مجرد ملاحظة، ويوفر بعض الراحة للآخرين الذين يحتاجون إلى استخدام هذا المكون.

المصدر وأدراج API:

مصدر bootstrap-fileinput:https://github.com/kartik-v/bootstrap-fileinput

API عبر الإنترنت لـ bootstrap-fileinput:http://plugins.krajee.com/file-input

عرض Demo لـ bootstrap-fileinput:http://plugins.krajee.com/file-basic-usage-demo

أولاً: عرض التأثير

　1- input type='file' الأصلي، لا يمكن التسامح به.

2- bootstrap fileinput بدون أي زخرفة: (تطوير بدائي لـ bootstrap fileinput)

3- تطوير متقدم لـ fileinput bootstrap: ترجمة، إمكانية سحب وإفلات التحميل، التحقق من امتدادات الملفات (إذا لم تكن الملفات المطلوبة، لا يتم التحميل)

تحميل عبر سحب وإفلات

في عملية التحميل

4、تحسين bootstrap fileinput إلى أقصى حد: يسمح بتحميل عدة ملفات في نفس الوقت باستخدام متعدد الأطراف.

في عملية التحميل

بعد إكمال التحميل

2、مثال على الكود

　كيف حالك؟ كيف كان التأثير؟ لا تقلق، سنقوم بتحقيق التأثير المطلوب خطوة بخطوة.

1、صفحة cshtml

أولاً، قم بجلب ملفات js وcss المطلوبة.

//bootstrap fileinput 
 bundles.Add(new ScriptBundle("~/Content/bootstrap-fileinput/js").Include( 
    "~/Content/bootstrap-fileinput/js/fileinput.min.js", 
    "~/Content/bootstrap-fileinput/js/fileinput_locale_zh.js"); 
 bundles.Add(new StyleBundle("~/Content/bootstrap-fileinput/css").Include( 
    "~/Content/bootstrap-fileinput/css/fileinput.min.css"); 
@Scripts.Render("~/Content/bootstrap-fileinput/js") 
@Styles.Render("~/Content/bootstrap-fileinput/css") 

ثم تعريف علامة input type='file'

<form> 
 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
  <div class="modal-dialog modal-lg" role="document"> 
   <div class="modal-content"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> 
     <h4 class="modal-title" id="myModalLabel">يرجى اختيار ملف Excel</h4> 
    </div> 
    <div class="modal-body"> 
     <a href="~/Data/ExcelTemplate/Order.xlsx" rel="external nofollow" class="form-control" style="border:none;">تنزيل قالب الاستيراد</a> 
     <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" /> 
    </div></div> 
  </div> 
 </div> 
</form>

重点看这一句：

<input type="file" name="txt_file" id="txt_file" multiple class="file-loading" /> 

multiple表示允许同时上传多个文件，class=“file-loading”表示标签的样式。这里很重要，如果class="file"，则中文化不能生效。

2、js初始化

$(function () { 
 //0.初始化fileinput 
 var oFileInput = new FileInput(); 
 oFileInput.Init("txt_file", "/api/OrderApi/ImportOrder"); 
});<span class="cnblogs_code_copy"></span> 
<span class="cnblogs_code_copy"></span> 
//初始化fileinput 
var FileInput = function () { 
 var oFile = new Object(); 
 //初始化fileinput控件（第一次初始化） 
 oFile.Init = function(ctrlName, uploadUrl) { 
 var control = $('#' + ctrlName); 
 //初始化上传控件的样式 
 control.fileinput({ 
  language: 'zh', //设置语言 
  uploadUrl: uploadUrl, //上传的地址 
  allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀 
  showUpload: true, //是否显示上传按钮 
  showCaption: false,//是否显示标题 
  browseClass: "btn btn-primary", //نمط الزر  
  //dropZoneEnabled: false,//هل يجب عرض منطقة السحب 
  //minImageWidth: 50, //أقل عرض للصورة 
  //minImageHeight: 50,//أقل طول للصورة 
  //maxImageWidth: 1000,//أكبر عرض للصورة 
  //maxImageHeight: 1000,//أعلى طول للصورة 
  //maxFileSize: 0,//يتم قياس الحجم بالكيلو بايت، إذا كان 0 فإن ذلك يعني عدم وجود حد أقصى للحجم 
  //minFileCount: 0, 
  maxFileCount: 10, //يعني عدد أكبر ملف يمكن تحميله في نفس الوقت 
  enctype: 'multipart/form-data', 
  validateInitialCount:true, 
  previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", 
  msgFilesTooMany: "عدد الملفات المختارة للتحميل ({n}) يتجاوز الحد الأقصى المسموح به {m}! ", 
 }); 
 //حدث بعد إكمال تحميل ملف الاستيراد 
 $("#txt_file").on("fileuploaded", function (event, data, previewId, index) { 
  $("#myModal").modal("hide"); 
  var data = data.response.lstOrderImport; 
  if (data == undefined) { 
   toastr.error('نوع ملف غير صحيح'); 
   return; 
  } 
  //1. تحضير الجدول 
  var oTable = new TableInit(); 
  oTable.Init(data); 
  $("#div_startimport").show(); 
 }); 
} 
 return oFile; 
}; 

شرح:

(1) يُقدم إلى طريقة fileinput() بيانات json تحتوي على العديد من الخصائص، حيث يمثل كل خاصية خصائص التحكم في التحضير الأولي للعنصر. إذا لم يتم ضبط هذه الخصائص، فإن ذلك يعني استخدام الإعدادات الافتراضية. إذا كان لديك اهتمام بمشاهدة الخصائص الموجودة، يمكنك فتح ملف source code لـ fileinput.js في النهاية كما في الشكل التالي:

هذه الخصائص إذا لم يتم ضبطها بشكل خاص، ستستخدم القيم الافتراضية.

(2) $("#txt_file").on("fileuploaded", function (event, data, previewId, index) {} هذا الطريقة تسجيل حدث استدعاء بعد الانتهاء من التحميل. أي بعد التعامل مع ملف التحميل يدخل إلى هذه الطريقة.

3、C# طريقة التعامل في الخلفي

　هل تذكر أن في js هناك دالة لت�始化 عنصر التحكم fileinput() مع مبدأ url؟ قيمة هذا url تشير إلى طريقة التعامل معها في C# الخلفي. سأقوم بعرض طريقة التعامل معها في الخلفي.

[ActionName("ImportOrder")] 
 public object ImportOrder() 
 { 
  var oFile = HttpContext.Current.Request.Files["txt_file"]; 
  var lstOrderImport = new List<DTO_TO_ORDER_IMPORT>(); 
  #region 0.数据准备 
  var lstExistOrder = orderManager.Find(); 
  var lstOrderNo = lstExistOrder.Select(x => x.ORDER_NO).ToList(); 
  var lstTmModel = modelManager.Find(); 
  var lstTmMaterial = materialManager.Find(); 
  //var iMax_Import_Index = lstExistOrder.Max(x => x.IMPORT_INDEX); 
  //iMax_Import_Index = iMax_Import_Index == null ? 0 : iMax_Import_Index.Value; 
  #endregion 
  #region 1.通过Stream得到Workbook对象 
  IWorkbook workbook = null; 
  if (oFile.FileName.EndsWith(".xls")) 
  { 
   workbook = new HSSFWorkbook(oFile.InputStream); 
  } 
  else if(oFile.FileName.EndsWith(".xlsx")) 
  { 
   workbook = new XSSFWorkbook(oFile.InputStream); 
  } 
  if (workbook == null) 
  { 
   return new { }; 
  } 
  //...............الlogic لمعالجة Excel 
  //orderManager.Add(lstOrder); 
  lstOrderImport = lstOrderImport.OrderBy(x => x.IMPORT_STATU).ToList(); 
  return new { lstOrderImport = lstOrderImport }; 
 } 

بما أن مشروع البлог الخاص بي هو تحميل ملفات Excel، لذا أستخدم منطق NPOI هنا، إذا كنت تريد تحميل صورة أو ملفات أخرى، يمكنك استخدام GDI لمعالجة الصور.

النقطة الرابعة: تحميل ملفات متعددة في نفس الوقت

عند تحميل عدة ملفات في نفس الوقت، سيتم إرسال عدة طلبات متزامنة إلى الخادم، مما يعني أن عند تحميل ثلاثة ملفات في نفس الوقت، سيتم الدخول إلى طريقة ImportOrder في الخادم ثلاث مرات. بهذا يمكن استخدام متعدد الأسطر لمعالجة ثلاثة ملفات في نفس الوقت.

الجزء الثالث: التلخيص

في الواقع، قد تم تقديم استخدام fileinput الأساسي لـ bootstrap بشكل عام، إنه مكون تحميل فقط، لا يوجد استخدامه متقدم. الهدف الرئيسي هو جعل واجهة المستخدم أكثر ودية، وتحسين تجربة المستخدم بشكل أفضل. إذا كان لديك أي أسئلة، يرجى ترك تعليق، وسأقوم بالرد على أسئلتكم في أقرب وقت ممكن. وأنا أتمنى أن تكونوا قد دعمتم موقع呐喊 لتعليم البرمجة!

بيان: محتوى هذا المقال تم جمعه من الإنترنت، يحق لصاحب الحقوق أن يملكه، تم جمع المحتوى من قبل مستخدمي الإنترنت بطرقهم الخاصة وتم تحميله، هذا الموقع لا يمتلك الحقوق، لم يتم تعديل المحتوى بشكل يدوي، ولا يتحمل أي مسؤولية قانونية. إذا اكتشفت أي محتوى يشتبه في انتهاك حقوق النسخ، فالرجاء إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال '#' ب '@') لإبلاغنا، وقدم الدليل المطلوب، إذا تم التحقق من ذلك، فإن هذا الموقع سيقوم بإزالة المحتوى المشبوه فوراً.