Eu fui poupado recentemente. Resumi alguns usos comuns de componentes de bootstrap fileInput. Vou compartilhá -lo com a plataforma de rede Wulin para sua referência e também é conveniente para pesquisas futuras. Por favor, me perdoe pela pobre escrita deste artigo.
1. Exibição de efeito
1. O tipo de entrada original = 'arquivo' é tão insuportável para vê -lo.
2. Bootstrap FileInput sem qualquer decoração: (Evolução primária do bootstrap fileInput)
3. Evolução avançada do Bootstrap FileInput: Cultura chinesa, upload de arrastar e soltar, verificação de extensão de arquivo (se o arquivo não for necessário, ele não será carregado)
Arraste e solte o upload
Upload
4. Bootstrap FileInput Ultimate Evolution: Permite que vários arquivos sejam carregados ao mesmo tempo por vários threads.
Upload
Após a conclusão do upload
2. Exemplos de código
Que tal? Quão eficaz? Não se preocupe, alcançaremos os resultados acima passo a passo.
1. Página cshtml
Primeiro, apresente os arquivos JS e CSS necessários.
// bootstrap fileInputbundles.add (new scriptbundle ("~/content/bootstrap-filgup/js") Stylebundle ("~/content/bootstrap-fil-fileInput/css").Em seguida, defina o tipo de entrada = tag '' arquivo '
<form> <div id = "myModal" tabindex = "-1" role = "diálogo" aria-labelledby = "mymodallabel"> <div role = "document"> <div> <div> <botão tipo = "botão" ""> ">"> ">"> ">"> ">"> ">"> ">"> ">"> ">"> ">"> ">"> id = "mymodallabel"> selecione Arquivo Excel </h4> </div> <div> <a href = "~/data/Exceltemplate/order.xlsx" style = "borda: none;"> download de divinds </a> <input type = "file" name = "txt_file"> iD = "txt_file
Concentre -se nesta frase:
<input type = "arquivo" name = "txt_file" id = "txt_file" múltiplo />
Múltiplas significa que vários arquivos podem ser carregados ao mesmo tempo, e class = "carregamento de arquivos" significa o estilo da tag.
2. Inicialização do JS
$ (function () {// 0. Initialize FileInputVar ofileInput = new FileInput (); ofileInput.Init ("txt_file", "/api/OrderApi/importOrder");}); // Initialize FileInputVar FileInput = Function () {var Ofile = new o object (); // uPLOURL) {var Control = $ ('#' + ctrlName); // Inicialize o estilo do controle de upload.FileInput ({idioma: 'zh', // defina o uploadurl de idioma: uploadrl, // upload de endereço/upload filextionssions: ['jpg', 'gif', png.] ShowCaption: false, // O navegador de título é o navegador: "btn Btn-Primary", // estilo de botão // DropZoneEnabled: False, // A área de arrasto // MinimageWidth: 50, // MinimageWidth da figura // MinimageHeight: 50, // A altura mínima da picture // Imagem // MaximageHeight: 1000, // A altura máxima da imagem // maxfilesize: 0, // a unidade é kb. Verdadeiro, VIVIEWFILEICON: "<i class = 'glificon glificon-king'> </i>", msgFileSteMany: "Selecione o número de arquivos carregados ({n}) excede o valor máximo permitido {m}!",}); // eventos após o arquivo de importação está concluído $ ("{m}! dados, visualize, index) {$ ("#mymodal"). TableInit (); OTable.init (dados); $ ("#div_startimport"). Show ();});} retornar deile;};ilustrar:
(1) O método FileInput () é passado em um JSON Data, que possui muitos atributos. Cada atributo representa as características ao inicializar o controle de upload. Se nenhum desses atributos estiver definido, isso significa que as configurações padrão serão usadas. Se você quiser ver quais propriedades estão dentro dela, você pode abrir o código fonte do FileInput.js, como mostrado no final dele:
Se essas propriedades não forem definidas especificamente, os valores padrão serão usados.
(2) $ ("#TXT_FILE").
3. Métodos correspondentes ao fundo C#
Você se lembra que existe um URL do parâmetro no método de controle de inicialização FileInput () em JS? O valor correspondente deste URL indica o método de processamento correspondente de C# após o dia. Ou publique o método de processamento em segundo plano.
[ActionName ("importOrder")] public Object importOrder () {var ofile = httpContext.current.request.files ["txt_file"]; var lStormimport = new List <dto_to_order_import> ();#região 0.data preparação varnArtOrder = OrderManager.ForM.Ing. x.order_no) .tolist (); var lSttmmodel = modelManager.find (); var lsttmmaterial = materialManager.find (); // var iMax_import_index = lSTEXISTORDEM.MAX_MAX_MAX (X => x.import_index); // imax_iMax_iMax = imax = iMax = iMax = iMax (x => x.import_index); 0: IMAX_IMPORT_INDEX.VALUE;#ENDRegion#Região 1. Obtenha o objeto da pasta de trabalho através do stream iworkbook workbook = null; if (ofile.FileName.endSwith (". Xls")) {Work.File.FilenAnMe.Enname.EnTex (Ofile.InputStream);} mais se (OFILE.FilEn.FilenAnam.Ilname.Ilname.InTeren; Xssfworkbook (ofile.inputStream);} if (manual de trabalho == null) {return new {};} // ............ lidar com o excel logic //orderManager.add(lstorder) ;lstorderimport = lStormimport.orderby (x => x.Import_statu) .Trocolist = lTrordeImport.ordyby (x => x.Import_stat) .Tolist ();Como o projeto do blogueiro é fazer upload do Excel, a lógica nPOI é usada aqui. Se você enviar fotos e outros arquivos, poderá usar o GDI para processar as imagens.
4. Carregue vários arquivos ao mesmo tempo
Quando vários arquivos são carregados ao mesmo tempo, a recepção enviará várias solicitações assíncronas para o plano de fundo. Ou seja, quando três arquivos são enviados ao mesmo tempo, o método de importação em segundo plano será inserido três vezes. Isso permite que você processe três arquivos ao mesmo tempo usando vários threads.
3. Resumo
O uso básico do Bootstrap FileInput é introduzido aproximadamente. De fato, é um componente carregado e não há usos avançados. A chave é tornar a interface mais amigável e aumentar melhor a experiência do usuário.
Vou apresentar muito a você sobre o uso de componentes de upload de arquivo de arquivo de arquivo de bootstrap. Espero que seja útil para você!