Me han salvado recientemente. He resumido algunos usos comunes de los componentes de Bootstrap FileInput. Lo compartiré con la plataforma Wulin Network para su referencia, y también es conveniente para futuras búsquedas. Por favor, perdóname por la mala escritura de este artículo.
1. Muestra de efecto
1. El tipo de entrada original = 'Archivo' es tan insoportable para mirarlo.
2. Bootstrap FileInput sin ninguna decoración: (Evolución primaria de Bootstrap FileInput)
3. Evolución avanzada de Bootstrap FileInput: cultura china, carga de arrastrar y soltar, verificación de extensión de archivo (si no es necesario el archivo, no se cargará)
Arrastre y suelte la carga
Carga
4. Bootstrap FileInput Ultimate Evolution: permite cargar varios archivos al mismo tiempo por múltiples hilos.
Carga
Después de completar la carga
2. Ejemplos de código
¿Qué tal? ¿Qué tan efectivo? No se preocupe, lograremos los resultados anteriores paso a paso.
1. Página CSHTML
Primero, presente los archivos JS y CSS requeridos.
// bootstrap fileInputBundles.add (nuevo scriptBundle ("~/content/bootstrap-fileinput/js"). include ("~/content/bootstrap-fileinput/js/fileinput.min.js", "~/content/bootstrap-Fileinput/js/fileinput_locale_zh.js");); StyleBundle ("~/content/bootstrap-fileinput/css"). Include ("~/content/bootstrap-archivoinput/css/fileinput.min.css"));@scripts.render ("~/content/bootstrap-fileinput/js")@styles.render ("~/content/bootstrap-fileinput/csss")Luego defina la etiqueta de entrada = 'Archivo'
<Form> <div id = "mymodal" tabindex = "-1" role = "dialog" aria-labelledby = "mymodallabel"> <div role = "document"> <div> <div> <button type = "botón" data-dismiss = "modal" aria-label = "cerrar"> <span aria-hidden = "verdadero"> × </span id = "mymodallabel"> Seleccione el archivo Excel </h4> </div> <div> <a href = "~/data/exceltemplate/orden.xlsx" style = "border:"> Descargar la plantilla de importación </a> <input type = "file" name = "txt_file" id = "txt_file" múltiple/> </div> <div> <div> <div> <div> <div "name =" txt_file "id =" txt_file "múltiple/> </div> <div> <div"
Concéntrese en esta oración:
<input type = "file" name = "txt_file" id = "txt_file" múltiple />
Múltiples medios que se permite cargar múltiples archivos al mismo tiempo, y class = "carga de archivos" significa el estilo de la etiqueta.
2. Inicialización JS
$ (function () {// 0. Inicializar fileInputVar OfileInput = new FileInput (); OfileInput.init ("Txt_File", "/API/OrderApi/Importorder");}); // Inicializar FileInputVar FileInput = function () {var Ofile = new Object (); // Inicialize FileInput Control (Primera inicialización) OFILE. OFILE. uploadUrl) {var control = $ ('#' + ctrlname); // Inicializar el estilo de la carga control.fileInput ({lenguaje: 'zh', // Establezca el idioma uploadUrl: uploadUrl, // upload la dirección permitida dejextensions: ['jpg', 'gif', 'png'], // recibe el archivo sufx. showCaption: false, //Does the title browser browserClass: "btn btn-primary", //Button style//dropZoneEnabled: false, //Does the drag area//minImageWidth: 50, //MinimageWidth of the picture//minImageHeight: 50,//The minimum height of the picture//maxImageWidth: 1000,//The maximum width of the Imagen // MaximageHeight: 1000, // La altura máxima de la imagen // maxfilesize: 0, // La unidad es KB. true,previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",msgFilesTooMany: "Select the number of uploaded files ({n}) exceeds the maximum allowed value {m}! ",});// Events after import file upload is completed $("#txt_file").on("fileuploaded", function (event, data, PreviewID, índice) {$ ("#mymodal"). modal ("escondite"); var data = data.response.lstorderimport; if (data == Undefined) {toastr.error ('El tipo de formato de archivo es incorrecto'); return;} // 1. Tableinit (); otable.init (data); $ ("#div_startimport"). Show ();});} return ofile;};ilustrar:
(1) El método FileInput () se pasa en datos JSON, que tiene muchos atributos. Cada atributo representa las características al inicializar el control de carga. Si no se establecen ninguno de estos atributos, significa que se utilizan la configuración predeterminada. Si desea ver qué propiedades hay dentro de él, puede abrir el código fuente de FileInput.js, como se muestra al final:
Si estas propiedades no se establecen específicamente, se utilizarán los valores predeterminados.
(2) $ ("#txt_file"). On ("fileUploaded", función (evento, datos, vista previa, índice) {} Este método registra el evento de devolución de llamada después de cargar. Es decir, después de procesar el archivo cargado el día después del día después del procesamiento, ingresa el método para procesarlo.
3. Métodos correspondientes a fondo C#
¿Recuerdas que hay una URL de parámetros en el método de control de inicialización FileInput () en JS? El valor correspondiente de esta URL indica el método de procesamiento correspondiente de C# después del día. O publicar el método de procesamiento de fondo.
[ActionName("ImportOrder")]public object ImportOrder(){var oFile = HttpContext.Current.Request.Files["txt_file"];var lstOrderImport = new List<DTO_TO_ORDER_IMPORT>();#region 0.Data preparation 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_import_index == null? 0: IMAX_IMPORT_INDEX.VALUE;#Endregion#Región 1. Obtenga el objeto de libro de trabajo a través de la transmisión iWorkbook Workbook = null; if (ofile.fileName.endswith (". Xls")) {Workbook = new Hssfworkbook (Ofile.inputStream);} de lo contrario if (Ofile.filenAnAME.Endswith (". Xlsx) XSSFWorkBook (Ofile.inputStream);} if (Workbook == NULL) {return new {};} // ............ manejar Excel Logic //ordermanager.add(lstorder) ;LstOrderImport = lstorderPort.orderBy (x => x.Import_statu) .tolist (); return New {lstorderMort = lstorder = lstOrmort};};};};};};Dado que el proyecto del blogger es cargar Excel, la lógica NPOI se usa aquí. Si sube imágenes y otros archivos, puede usar GDI para procesar las imágenes.
4. Cargue varios archivos al mismo tiempo
Cuando se cargan varios archivos al mismo tiempo, la recepción enviará múltiples solicitudes asíncronas al fondo. Es decir, cuando se cargan tres archivos al mismo tiempo, el método ImportOrder en segundo plano ingresará tres veces. Esto le permite procesar tres archivos al mismo tiempo usando múltiples hilos.
3. Resumen
El uso básico de Bootstrap FileInput se introduce aproximadamente. De hecho, es un componente cargado y no hay usos avanzados. La clave es hacer que la interfaz sea más amigable y aumentar mejor la experiencia del usuario.
Le presentaré mucho sobre el uso de componentes de carga de archivos Bootstrap FileInput. ¡Espero que te sea útil!