Uso básico del plugin de carga de archivos bootstrap fileinput

Introducción:

Las tres entradas anteriores presentaron algunos usos comunes de bootstrap table, y el autor está fascinado por este estilo plano. Hace unos días, mientras desarrollaba una función de importación de Excel, el frontend utilizó el etiqueta input type='file', el efecto era insoportable, por lo que el autor decidió encontrar un componente de carga hermoso para reemplazarlo. Dado que bootstrap es de código abierto, la comunidad seguramente tiene muchos componentes relacionados, ciertamente también hay este componente común de carga. Después de una búsqueda, el esfuerzo no fue en vano, y el autor finalmente encontró este componente: bootstrap fileinput. Sobre la aplicación simple de este componente, experiencia resumida en el desarrollo basado en el marco de desarrollo BootStrap Metronic【cinco】Explicación detallada del uso del complemento de carga de archivos Bootstrap File Input, aunque muchos detalles no se abordaron, por lo que el autor, aparte de completar la tarea de desarrollo, resumió algunas usos comunes del componente. Se registra aquí, tanto como una nota, como para facilitar a los amigos que necesitan usarla.

Código fuente y dirección de API:

bootstrap-Código fuente de fileinput:https://github.com/kartik-v/bootstrap-fileinput

bootstrap-API en línea de fileinput:http://plugins.krajee.com/archivo-entrada

bootstrap-Demo de fileinput:http://plugins.krajee.com/archivo-básico-uso-demo

I. Presentación de efectos

　1、El input type='file' original, es muy desagradable.

2、bootstrap fileinput sin decoración (evolución básica de bootstrap fileinput)

3、bootstrap fileinput evolución avanzada: chinese, arrastrar y soltar para subir, validación de extensión de archivo (si no es el archivo necesario, no permite subir)

Subir arrastrando

En carga

4、bootstrap fileinput evolución ultimate: permite subir varios archivos en múltiples hilos al mismo tiempo.

En carga

Después de la carga

II. Ejemplo de código

　¿Cómo está? ¿El efecto es bueno? No te preocupes, lo haremos paso a paso.

1、cshtml página

Primero, introduce los archivos js y css necesarios.

//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") 

Luego definimos la etiqueta 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="Cerrar"><span aria-hidden="true">×</span></button> 
     <h4 class="modal-title" id="myModalLabel">seleccione el archivo Excel</h4> 
    </div> 
    <div class="modal-body"> 
     <a href="~/Data/ExcelTemplate/Order.xlsx" rel="external nofollow" class="form-control" style="border:none;">descargar plantilla de importación</a> 
     <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" /> 
    </div></div> 
  </div> 
 </div> 
</form>

foco en esta frase:

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

multiple representa que se permite subir varios archivos simultáneamente, class=“file-"loading" representa el estilo del etiqueta. Esto es muy importante, si class="file", el idioma chino no puede activarse.

2、js inicialización

$(function () { 
 //0. inicializar fileinput 
 var oFileInput = new FileInput(); 
 oFileInput.Init("txt_file", "/api/OrderApi/ImportOrder"); 
});<span class="cnblogs_code_copy"></span> 
<span class="cnblogs_code_copy"></span> 
//inicializar fileinput 
var FileInput = function () { 
 var oFile = new Object(); 
 //inicializar el控件 de fileinput (la primera inicialización) 
 oFile.Init = function(ctrlName, uploadUrl) { 
 var control = $('#' + ctrlName); 
 //inicializar el estilo del控件 de subida 
 control.fileinput({ 
  language: 'zh', //establecer el idioma 
  uploadUrl: uploadUrl, //la dirección de subida 
  allowedFileExtensions: ['jpg', 'gif', 'png'],//Los sufijos de archivo recibidos 
  showUpload: true, //Si se muestra el botón de carga 
  showCaption: false,//Si se muestra el título 
  browseClass: "btn btn-primary", //Estilo del botón  
  //dropZoneEnabled: false,//Si se muestra el área de arrastrar y soltar 
  //minImageWidth: 50, //La anchura mínima de la imagen 
  //minImageHeight: 50,//La altura mínima de la imagen 
  //maxImageWidth: 1000,//La anchura máxima de la imagen 
  //maxImageHeight: 1000,//La altura máxima de la imagen 
  //maxFileSize: 0,//La unidad es kb, si es 0 significa que no hay límite para el tamaño del archivo 
  //minFileCount: 0, 
  maxFileCount: 10, //representa la cantidad máxima de archivos que se pueden subir simultáneamente 
  enctype: 'multipart/form-data', 
  validateInitialCount: true, 
  previewFileIcon: "<i class='glyphicon glyphicon-king'></i>" 
  msgFilesTooMany: "La cantidad de archivos seleccionados ({n}) supera el número máximo permitido {m}!", 
 }); 
 //Evento完成后上传文件导入 
 $("#txt_file").on("fileuploaded", function (event, data, previewId, index) { 
  $("#myModal").modal("hide"); 
  var data = data.response.lstOrderImport; 
  if (data == undefined) { 
   toastr.error('El tipo de formato de archivo no es correcto'); 
   return; 
  } 
  //1.Inicializar la tabla 
  var oTable = new TableInit(); 
  oTable.Init(data); 
  $("#div_startimport").show(); 
 }); 
} 
 return oFile; 
}; 

Notas:

（1El método fileinput() recibe un datos json, que contiene muchas propiedades, cada una representa las características de inicialización del controlador de carga de archivos. Si estas propiedades no se configuran, significa que se utiliza la configuración predeterminada. Si los amigos del jardín quieren ver qué propiedades tiene, pueden abrir el código fuente de fileinput.js, en su última parte como se muestra en la figura:

Estas propiedades, si no se configuran específicamente, utilizarán los valores predeterminados.

（2）$("#txt_file").on("fileuploaded", function (event, data, previewId, index) {} Esta función registra el evento de llamada de retroalimentación después de la carga del archivo. Es decir, después de que el backend procesa el archivo, entra en este método para procesarlo.

3Método correspondiente en C# del backend

　¿Recuerdas que en js dentro del método de inicialización del control fileinput() hay un parámetro url?, el valor de este url indica el método de procesamiento correspondiente en el backend de C#. Aquí está el método de procesamiento en el backend.

[ActionName("ImportOrder")] 
 public object ImportOrder() 
 { 
  var oFile = HttpContext.Current.Request.Files["txt_file"]; 
  var lstOrderImport = new List<DTO_TO_ORDER_IMPORT>(); 
  #region 0. Preparación de datos 
  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 ?63; 0 : iMax_Import_Index.Value; 
  #endregion 
  #region 1Obteniendo el objeto Workbook a través de Stream 
  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) 
  { 
   devolver new { }; 
  } 
  //...............lógica de procesamiento de excel 
  //orderManager.Add(lstOrder); 
  lstOrderImport = lstOrderImport.OrderBy(x => x.IMPORT_STATU).ToList(); 
  devolver new { lstOrderImport = lstOrderImport }; 
 } 

Dado que el proyecto del blogger es subir excel, aquí se utiliza la lógica de NPOI, si se suben imágenes u otros archivos, se puede usar GDI para procesar imágenes.

4Subir varios archivos al mismo tiempo

Cuando se suben varios archivos al mismo tiempo, el frente enviará varias solicitudes asincrónicas al fondo, es decir, cuando se suban tres archivos al mismo tiempo, el método ImportOrder del fondo entrará tres veces. De esta manera, se puede usar multithreading para procesar tres archivos simultáneamente.

Tercero, Resumen

Resumen: La explicación básica del uso de fileinput de bootstrap está prácticamente terminada, es esencialmente un componente de subida, no hay técnicas avanzadas. El punto principal es hacer que la interfaz sea más amigable y mejorar la experiencia del usuario. Si tienen alguna pregunta, déjenme un mensaje, el editor responderá a tiempo. También agradezco mucho el apoyo de todos a la página web de呐喊教程！

Declaración: El contenido de este artículo se obtiene de la red, pertenece al propietario original, el contenido se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no se ha procesado editorialmente y no asume la responsabilidad de las responsabilidades legales relacionadas. Si encuentra contenido sospechoso de copyright, le invitamos a enviar un correo electrónico a: notice#w para informar, y proporcionar evidencia relevante.3Declaración: El contenido de este artículo se obtiene de la red, pertenece al propietario original, el contenido se contribuye y carga de manera autónoma por los usuarios de Internet, este sitio web no posee los derechos de propiedad, no se ha procesado editorialmente y no asume la responsabilidad de las responsabilidades legales relacionadas. Si encuentra contenido sospechoso de copyright, le invitamos a enviar un correo electrónico a: notice#w para informar, y proporcionar evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.