La entrada del archivo de archivo de carga de archivo Bootstrap es un buen control de carga de archivos, pero no hay muchos casos en búsqueda y uso. Al usarlo, también cruzas el río tocando la piedra paso a paso. Este control se presenta en la interfaz, y la carga que he usado antes es más hermosa y tiene funciones más potentes. Este artículo se basa principalmente en mi propio caso de código marco, introduciendo el uso de la entrada de archivo, el complemento de carga de archivo.
1. Introducción a la entrada de archivo para el complemento de carga de archivos
La dirección de la página de inicio de este complemento es: http://plugins.krajee.com/file-input. Puede ver muchas pantallas de código de demostración desde aquí: http://plugins.krajee.com/file-basic-usage-demo.
Este es un control de entrada de archivo HTML5 mejorado, una extensión de Bootstrap 3.x, implementando una vista previa de carga de archivos, carga de múltiples archivos y otras funciones.
En términos generales, necesitamos introducir los siguientes dos archivos para que el complemento se use normalmente:
Bootstrap-FileInput/CSS/FileInput.min.css
Bootstrap-FileInput/JS/FileInput.min.js
El efecto de interfaz simple es el siguiente. Al igual que muchos controles de archivos de carga, puede aceptar varios tipos de archivos. Por supuesto, también podemos especificar el tipo de archivo específico y otras funciones que se aceptan.
Si es necesario considerar la cultura china, entonces deben introducirse documentos:
Bootstrap-FileInput/js/fileInput_locale_zh.js
De esta manera, según la colección de paquetes de MVC, podemos agregar los archivos que necesitan a la colección.
// Agregar soporte para el control Bootstrap-FileInput CSS_Meteronic.include ("~/content/myplugins/bootstrap-archivoinput/css/fileinput.min.css"); js_meteronic.include ("~/content/myplugins/bootstrap-archivoinput/js/fileinput.min.js"); js_meteronic.include ("~/content/myplugins/bootstrap-archivoinput/js/fileInput_locale_zh.js"); js_meteronic.include ("~/content/myplugins/bootstrap-archivoinput/js/fileInput_locale_zh.js");De esta manera, podemos presentar la descripción y las indicaciones de la interfaz china en la página, como se muestra en la siguiente interfaz.
2. Uso de la entrada de archivo para la carga de archivos
En términos generales, podemos definir una función JS general para inicializar este control de complemento, como se muestra en el siguiente código de función JS.
// Inicializar la función FileInput Control (Primera inicialización) initFileInput (ctrlname, uploadUrl) {var control = $ ('#' + ctrlname); control.fileInput ({lenguaje: 'zh', // Establezca el lenguaje uploadUrl: uploadUrl, // dirección cargada permitidafileExtensions: ['jpg', 'png', 'gif'], // recibió el sufre de archivo showupload: false, // el botón de button de carga: falso, // hace el título browser browser browserclassClassClassClassClassClassClassClassClassClassClass: "" Carga la carga de la carga de la carga ",", ",", ",", ",", ",", es el sufre de archivo ",", ",", ",", ",", ",", es el título de Browser BrowserClassClassClassClassClassClassClass. "" // Botton Style PreviewFileicon: "<i class = 'Glyphicon Glyphicon-King'> </i>",});}En el código de página, colocamos un control de carga de archivo, como se muestra en el siguiente código.
<div style = "altura: 500px"> <input id = "file-Portrait1" type = "file"> </div>
De esta manera, el código de inicialización de nuestro código de script es el siguiente:
// Inicializar el FileInput Control (Primera Inicialización) InitFileInput ("File-Portrait", "/User/EditTorTrait");Esto completa la inicialización del control. Si necesitamos cargar un archivo, también necesitamos el código JS para manejar los eventos cargados por el cliente, y también necesitamos el controlador de fondo MVC para manejar la operación de guardado del archivo.
Por ejemplo, mi código para guardar datos de formulario es el siguiente.
// Agregar registro formvalidate ("ffadd", function (form) {$ ("#add"). Modal ("hide"); // Enviar parámetros de construcción a los en segundo plano postdata = $ ("#ffadd"). Serializearear (); $ .post (url, postdata, function (json) {var data = $. // Agregar procesamiento de retratación InitporTrait (data.data1); }). Error (function () {showtips ("No está autorizado a usar esta función, comuníquese con el administrador para manejarlo");}); });Entre ellos, notamos el código lógico de procesamiento parte del guardar archivo:
// Agregar el procesamiento de carga de Portrait InitTorTrait (data.data1); // Use la ID escrita para actualizar $ ('#file-Portrait'). FileInput ('upload');La primera línea de código es reconstruir el contenido adicional cargado, como la información de identificación del usuario, para que podamos crear algunos datos adicionales basados en estos ID para cargar y procesar para el fondo.
Esta función reasigna principalmente la ID para facilitar la adquisición de los últimos parámetros adicionales al cargar. Esto es lo mismo que el modo de procesamiento de carga.
// Inicializar la función de información de imagen InitPorTrait (CtrlName, ID) {var control = $ ('#' + ctrlname); var imageUrl = '/picturealBum/getPorTrait? id =' + id + '& r =' + math.random (); //Important, it is necessary to update the additional parameter content of the control, and the image initialization display control.fileinput('refresh', { uploadExtraData: { id: id }, initialPreview: [ //Preview the image settings "<img src='" + imageurl + "' class='file-preview-image' alt='Portrait picture' title='Portrait Picture'>", ], }); }Como vimos anteriormente, la dirección que cargué es: "/User/EditTorTrait". También anunciaré esta función de fondo, con la esperanza de darle un código de caso completo para aprender.
/// <summary> /// Cargue la imagen avatar del usuario //// </summary> /// <param name = "id"> ID de usuario </marr> /// <surns> </surense> public ActionResult EditTorTrait (int id) {CommonResult Result = new CommonResult (); intente {var files = request.files; if (files! = null && files.count> 0) {userInfo info = bllfactory <serer> .instance.findbyid (id); if (info! = null) {var fileData = readFileBytes (archivos [0]); result.success = bllFactory <serer> .instance.updatepersoniMagebytes (userImageType.personportrait, id, fileData); }}} Catch (Exception Ex) {result.errormessage = ex.message; } return tOjsonContent (resultado); }De esta manera, hemos creado la lógica de ahorro y procesamiento de retratos del usuario anteriores, y los archivos se pueden guardar normalmente en el sistema de archivos de fondo, y al mismo tiempo, se registra alguna información necesaria en la base de datos.
Por supuesto, además de usarlo para procesar imágenes de retratos del usuario, también podemos usarlo para crear operaciones de procesamiento de álbumes de imágenes. La interfaz específica es la siguiente.
El código de inicialización para esta parte es el siguiente:
//Initialize the fileinput control (first initialization) $('#file-Portrait').fileinput({ language: 'zh', //Set the language uploadUrl: "/FileUpload/Upload", //Upload address allowedFileExtensions: ['jpg', 'png','gif'], //Received file suffix, maxFileCount: 100, enctype: 'múltipart/form de formato', showupload: true, // hace el botón de carga showcaption: false; // ¿El navegador de título BrowserClass: "btn btn-imprimary", // button style wyle wyleeiceFileicon: "<i class = 'glyphicon glyphicon-king'> </i>", msgfilestoomany: "el número de archivos (cargador ({{{{{{{{{{{{{{{{{{{ excede el valor máximo permitido {m}! ",});Lo anterior es la explicación detallada de la experiencia del marco de desarrollo metronico de Bootstrap introducido por el editor para usted [cinco] El uso del complemento de carga de archivo de archivo de archivo Bootstrap se explica en detalle. Espero que sea útil para todos. Si desea saber más información, ¡preste atención al sitio web de Wulin.com!