A entrada do arquivo de plug-in de upload do arquivo de bootstrap é um bom controle de upload de arquivo, mas não há muitos casos em pesquisa e uso. Ao usá -lo, você também atravessa o rio tocando a pedra passo a passo. Esse controle é apresentado na interface, e o upload que usei antes é mais bonito e tem funções mais poderosas. Este artigo é baseado principalmente no meu próprio caso de código-estrutura, introduzindo o uso da entrada do arquivo, o plug-in de upload de arquivos.
1. Introdução à entrada do arquivo para plug -in de upload de arquivos
O endereço da página inicial deste plug-in é: http://plugins.krajee.com/file-input. Você pode ver muitas exibições de código de demonstração daqui: http://plugins.krajee.com/file-basic-usage-demo.
Este é um controle de entrada de arquivo HTML5 aprimorado, uma extensão do bootstrap 3.x, implementando visualização de upload de arquivos, upload de vários arquivos e outras funções.
De um modo geral, precisamos apresentar os dois arquivos a seguir para que o plug-in seja usado normalmente:
Bootstrap-FileInput/CSS/FileInput.min.css
Bootstrap-FileInput/js/fileInput.min.js
O efeito simples da interface é o seguinte. Como muitos controles de arquivo de upload, ele pode aceitar vários tipos de arquivos. Obviamente, também podemos especificar o tipo de arquivo específico e outras funções aceitas.
Se a cultura chinesa precisar ser considerada, os documentos precisam ser introduzidos:
Bootstrap-FileInput/JS/FileInput_locale_zh.js
Dessa forma, com base na coleção de pacotes da MVC, podemos adicionar os arquivos necessários à coleção.
// Adicione suporte para controle de bootstrap-fil-fileInput css_meteronic.include ("~/content/myplugins/bootstrap-fil-FileInput/css/fileInput.min.css"); js_meteronic.include ("~/content/myplugins/bootstrap-fil-FileInput/js/fileInput.min.js"); js_meteronic.include ("~/content/myplugins/bootstrap-fil-FileInput/js/fileInput_locale_zh.js"); js_meteronic.include ("~/content/myplugins/bootstrap-fil-FileInput/js/fileInput_locale_zh.js");Dessa forma, podemos apresentar a descrição da interface chinesa e os avisos na página, conforme mostrado na interface a seguir.
2. Uso da entrada de arquivo para upload de arquivo
De um modo geral, podemos definir uma função JS geral para inicializar esse controle de plug-in, conforme mostrado no seguinte código de função JS.
// Inicialize a função do Controle do FileInput (First Initialization) initfileInput (CtrlName, UPLOURL) {var Control = $ ('#' + CtrlName); Control.FileInput ({Idioma: 'Zh', // Defina o Language UploURL: UPLOURL, // Endereço Carregado PermitidofileExtensions: ['jpg', 'Png', 'gif'], // SOFIXO RECEBTILT SHOSTEPLOAD: FALSO // FALSO O BOTTONS ALVIMEIRATEL: // Falta, // não recebeu o BrowiTs, o BrowOls da BrowST: // não é o BOTONS: // Butten, //, o BUTROWS-SHOWST: // Butten, // Butten, //, o BUTONS, //, o BUTHIRT, // não é o Blowers. // Button Style PreviewFileicon: "<i class = 'glyphicon glyphicon-king'> </i>",});}No código da página, colocamos um controle de upload de arquivo, conforme mostrado no código a seguir.
<div style = "altura: 500px"> <input id = "file-portrait1" type = "arquivo"> </div>
Dessa forma, o código de inicialização do nosso código de script é o seguinte:
// Inicialize o Controle do FileInput (Primeira Inicialização) InitfileInput ("File-Portrait", "User/EditPortrait");Isso completa a inicialização do controle. Se precisarmos fazer upload de um arquivo, também precisamos de código JS para lidar com os eventos enviados pelo cliente e também precisamos do controlador de fundo do MVC para lidar com a operação de economia de arquivos.
Por exemplo, meu código para salvar dados do formulário é o seguinte.
// Adicione o registro formalidate ("ffadd", function (form) {$ ("#add"). Modal ("hide"); // Envie parâmetros de construção para o plano de fundo var postData = $ ("#ffadd"). SerializeArray (); $ .post (url, pós -data (json). // Adicione o Processamento do Retrato InitporTrait (Data.Data1); }). Error (function () {ShowTips ("Você não está autorizado a usar esta função, entre em contato com o administrador para lidar com isso.");}); });Entre eles, notamos a parte do código lógico de processamento da economia de arquivos:
// Adicione o processamento de upload do retrato initporTrait (data.data1); // use o ID escrito para atualizar $ ('#file-portrait'). FileInput ('upload');A primeira linha de código é reconstruir o conteúdo adicional enviado, como as informações de ID do usuário, para que possamos criar alguns dados adicionais com base nesses IDs para fazer upload e processamento para o plano de fundo.
Essa função reatribui principalmente o ID para facilitar a aquisição dos parâmetros adicionais mais recentes ao fazer o upload. É o mesmo que o modo de processamento de upload.
// Inicialize a função de informação da imagem initportrait (ctrlName, id) {var Control = $ ('#' + ctrlName); var imageurl = '/picturealbum/getportrait? id =' + id + '& r =' + math.random (); /IMPORTANTE, é necessário atualizar o conteúdo adicional do parâmetro do controle e a inicialização da imagem Control.FileInput ('Refresh', {uploadextradata: {id: id}, InitialPreview: [// visualizar as configurações da imagem "<img src = '" + imageurl + "' class = 'File-Preview- }); }Como vimos anteriormente, o endereço que eu carreguei é: "/Usuário/editportrait". Também anunciarei essa função de fundo, na esperança de fornecer um código de caso completo para aprender.
/// <summary> /// Carregar Imagem de Avatar do usuário /// </summary> /// <param name = "id"> ID do usuário </param> /// <lorpns> </returns> public ActionResult editPorTrait (int id) {CommonResult resultado = new CommonResult (); tente {var arquivos = request.files; if (files! = null && files.count> 0) {userInfo info = bllFactory <suser> .instance.findbyId (id); if (info! = null) {var fileData = readfileBytes (arquivos [0]); Result.Success = BllFactory <suser> .Instance.UpDatePersonImageBytes (UserImageType.PersonporTrait, ID, FileData); }}} catch (Exceção ex) {resultado.errorMessage = ex.Message; } retornar TOJSONCONTENT (resultado); }Dessa forma, criamos a lógica de poupança e processamento de retratos do usuário acima, e os arquivos podem ser salvos normalmente no sistema de arquivos em segundo plano e, ao mesmo tempo, algumas informações necessárias são registradas no banco de dados.
Obviamente, além de usá -lo para processar imagens de retratos do usuário, também podemos usá -lo para criar operações de processamento de álbuns de imagens. A interface específica é a seguinte.
O código de inicialização desta parte é o seguinte:
//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: 'Multipart/Form-Data', ShowPload: true, // O botão de upload mostra: Falso, // faz o navegador de navegador de título: "Btn Btn-Primary", // Button Style VisuewFileicon: "<I Class = 'Glynphicon Glyyn Glyun de Glyun de Mirhicon-King'> </i>> </i>> </i>> </i> </i>" ({n}) excede o valor máximo permitido {m}! ",});O exposto acima é a explicação detalhada da experiência da estrutura de desenvolvimento metrônico de bootstrap introduzida pelo editor a você [cinco] O uso do plug-in de upload de arquivo de entrada de arquivo de bootstrap é explicado em detalhes. Espero que seja útil para todos. Se você quiser saber mais informações, preste atenção ao site wulin.com!