Основное использование плагина загрузки bootstrap fileinput

Введение:

Предыдущие три статьи介绍了 некоторые常见 использования bootstrap table, и я обнаружил, что блогер несколько увлечен этим плоским стилем. На днях я занимался функцией импорта excel, и frontend использовал исходный input type='file' этот тег, и результат был просто невыносимым. Тогда блогер решил найти красивый компонент для загрузки файлов, чтобы заменить его. Поскольку bootstrap открыт для开源, то в сообществе наверняка есть множество компонентов, связанных с ним, и, возможно, есть такой же распространенный компонент для загрузки файлов. После долгих поисков, не зря потраченного времени, блогер нашел этот компонент: bootstrap fileinput. О простом применении этого компонента, на основе опыта разработки BootStrap Metronic (пятая статья) Подробное описание использования плагина для загрузки файлов Bootstrap File Input, но много деталей не было затронуто, поэтому блогер总结了 некоторые常见 использования этого компонента, помимо выполнения разработочных задач. Запишу это для себя, чтобы это было как заметка, и предоставлю удобства для друзей, которые нуждаются в этом.

Исходный код и адрес API:

Исходный код bootstrap-fileinput:https://github.com/kartik-v/bootstrap-fileinput

Онлайн API bootstrap-fileinput:http://plugins.krajee.com/file-input

Премьера bootstrap-fileinput:http://plugins.krajee.com/file-basic-usage-demo

1. Премьера эффектов

　1. Исходный input type='file', просто не хочется смотреть.

2. Bootstrap fileinput без всякого украшения: (первичный уровень эволюции bootstrap fileinput)

3. Высокий уровень эволюции bootstrap fileinput: китаизация, возможность перетаскивания для загрузки файлов, проверка расширения файлов (если это не необходимые файлы, не разрешается загружать)

Перетащите для загрузки

Во время загрузки

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,// размер файла в kb, если 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-данные, в которых много свойств, каждое из которых代表着 характеристики инициализации контроллера загрузки файлов. Если эти свойства не установлены, это означает использование стандартных настроек. Если пользователи хотят увидеть, какие свойства есть в нем, они могут открыть исходный код fileinput.js, в котором в конце есть как на рисунке:

Эти свойства, если их не特意设置， будут использовать значения по умолчанию.

(2) $("#txt_file").on("fileuploaded", function (event, data, previewId, index) {} этот метод регистрирует обратное событие после завершения загрузки файла. Это означает, что после обработки загруженного файла на заднем плане, мы переходим к обработке в этом методе.

3. Метод C# на заднем плане

　Запомните, в js при инициализации контрола метод fileinput() есть параметр 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 { }; 
  } 
  //...............Обработка логики excel 
  //orderManager.Add(lstOrder); 
  lstOrderImport = lstOrderImport.OrderBy(x => x.IMPORT_STATU).ToList(); 
  return new { lstOrderImport = lstOrderImport }; 
 } 

Поскольку проект автора загружает excel, поэтому здесь используется логика NPOI, если загружается изображение и другие файлы, можно использовать GDI для обработки изображений.

4. Одновременная загрузка нескольких файлов

Когда одновременно загружается несколько файлов, фронтенд отправляет несколько асинхронных запросов на задний план, то есть, когда одновременно загружается три файла, метод ImportOrder на заднем плане вызывается три раза. Таким образом, можно использовать многоthread для обработки трех файлов одновременно.

3. Обобщение

Обзор базового использования bootstrap fileinput завершен, на самом деле это просто компонент для загрузки файлов, нет никаких продвинутых методов. Важно сделать интерфейс более удобным и улучшить пользовательский опыт. Если у вас есть какие-либо вопросы, пожалуйста, оставьте комментарий, редактор ответит вам в кратчайшие сроки. В этом также выражаю благодарность всем за поддержку сайта呐喊教程!

Заявление: контент этой статьи взят из Интернета, авторские права принадлежат соответствующему автору. Контент предоставлен пользователями Интернета, загружен самостоятельно, сайт не обладает правами собственности, не прошел редакторскую обработку и не несет ответственности за связанные с этим юридические вопросы. Если вы обнаружите спорный контент, пожалуйста, отправьте письмо по адресу notice#oldtoolbag.com (во время отправки письма замените # на @) для отчета и предоставьте соответствующие доказательства. Если подтвердится, что контент нарушил права на интеллектуальную собственность, сайт незамедлительно удалит спорный контент.