Recentemente, estou escrevendo meu próprio site pessoal, a estrutura de bootstrap usada no front -end. Quando consegui a função de upload das imagens, encontrei um plug-in de entrada de arquivos de upload de upload de upload baseado em Bootstrap na Internet. Esse plug-in é muito consistente com minha visão estética, então registrarei brevemente o uso desse plug-in.
Primeiro, apresente arquivos plug -in CSS e JS de acordo com o caminho do seu projeto
Observe que os arquivos de idioma do local são introduzidos após o arquivo FileInput.min.js
<!-Entrada de arquivo-> <link href = "../../ css/fileInput.min.css" rel = "Stylesheet"> <script src = "../../ js/fileinput.min.js"> </script> <script src = "..// JS/Js
Depois, há o código HTML porque eu não sou um front-end profissional, então o código do front-end é muito ruim e levemente esguicho e atingido
<!-caixa modal (modal)-> <span style = "space branca: pré"> </span> <div id = "mymodal" tabindex = "-1" role = "diálogo" aria-labelledby = "mymodAllabel" aria-hidden = "true" <estilo "span <span> </span> </span> </span> </span> </span> </span> </span> </span> <ivan> <niv" <ivan> <span> </span> </span> </span> <ivan " style="white-space:pre"> </span><div> <span style="white-space:pre"> </span><div> <span style="white-space:pre"> </span><div> <span style="white-space:pre"> </span><button type="button" data-dismiss="modal" aria-hidden="true"> <span style="white-space:pre"> </span>× <span estilo "space branca: pré"> </span> </button> <span style = "space branco: pre"> </span> <h3 id = "mymodallabel" align = "center"> <span style = "white space: pré"> </span> <b> spore de música </b> <span style = "space" pré "> </span> <b> </span></div> <span style="white-space:pre"> </span><div> <span style="white-space:pre"> </span><form id="addForm" role="form" enctype="multipart/form-data"> <span style="white-space:pre"> </span> <div> <span style="white-space:pre"> </span> <span> Score name</span> <span style Style = "White-Space: pré"> </span> <input type = "text" id = "scorename" name = "scorename" placeholder = ""> <span style = "span-space: pré"> </</div> <estily = "span-space: pré"> </span> 10px;"> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span><span> Score type</span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style = "span =" span style = "brancos: pré"> </span> <span style = "space branco: pré"> </span> </div> <span style = "white-space: pré"> </span <span style = "space branco: pré"> </span> style = "white-space"> <span> <span = "space"> span </span </span = "span space: pré"> </span> style = "white-space> pré"> 10px; margem-esquerda: 90px; "> <span style =" space branca: pré "> </span> <span style =" space branca: pré "> </span> <span style =" white-space: pre "> </span> <span style =" span space: pré "> </span> <input type =" text ">" difícil ". <span style="white-space:pre"> </span> </div> <span style="white-space:pre"> </span> <div style="margin-top: 10px;"> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <span style="white-space:pre"> </span> <input type="text" id="tune" name="tune"> <span style="white-space:pre"> </span> </div> <span style="white-space:pre"> </span> <div> <span style="white-space:pre"> </span><input id="fileup" type="file"/> <span style="white-space:pre"> </span> </div> <span style = "espaço branco: pré"> </span> </morm> <span style = "space branco: pré"> </span> </div> <span style = "space branco: pre"> </span> </divhay <span style = "space branco: pré"> </span> <div> <estilo "" Data-Dismiss = "Modal"> Close <Span style = "White-Space: Pre"> </span> </butut> <span style = "space branco: pré"> </span> <!-<span style = "white-space: pré"> </span> <!-<! /.modal-content-> <span style = "espaço branco: pre"> </span> </div> <!-/.modal-> <span style = "space branco: pré"> </span> </div>
Em seguida, o código JS inicializa a entrada de arquivo
// 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: True, // Faz o Botão de Botão. // Button Style VisuewFileicon: "<i class = 'glificon glificon-king'> </i>", uploadAsync: false, uploadextradata: function (visualize, index) {var obj = {}; $ (this) .val (); } // inicialize o arquivo initfileInput ("fileup", http: // localhost: 8080/web/guita/addguitainfo.action);Este código é o núcleo do plugin
UploURL é o caminho de acesso fornecido pelo fundo
Este é um parágrafo especial aqui
Uploadextradata: function (visualize, index) {var obj = {}; $ ('#addForm'). find ('input'). cada (function () {var id = $ (this) .attr ('id'), val = $ (this) .val (); obj [id] = val;}); retornar obj; }Este código uploadextradata é adequado para passar parâmetros adicionais que podem ser usados para enviar formulários para outros dados da caixa de entrada.
Uploadextradata: {type: "type", tune: "tune"}Geralmente, os dados estáticos podem ser recebidos diretamente, conforme mostrado na figura acima. No entanto, se você escrever assim, não obterá dados dinâmicos. Os dados serão gerados apenas uma vez durante a inicialização e não serão alterados.
Fiquei confuso sobre esse problema por muito tempo. Finalmente, li as discussões sobre amigos estrangeiros no Git e depois me refiro à API para resolvê -la.
Depois de escrever isso, você pode ver as renderizações
O estilo ainda é muito bom. Clique para fazer upload e todos os dados serão enviados para o plano de fundo.
Muitos dos aplicativos plug-in encontrados on-line estão integrados ao PHP. Eu escrevi em Java. Aqui também fui ao código recebido em segundo plano. A estrutura SpringMVC é muito conveniente para receber dados.
Dessa forma, os parâmetros de dados e os parâmetros de imagem são passados, e o plano de fundo chama o código enviado pelo arquivo para salvar a imagem
Existem muitos usos que valem a pena estudar para este plug-in. Aqui, falo brevemente sobre como usá -lo e concluir a transmissão de dados dinâmicos. Amigos que acabaram de entrar em contato com este plug-in podem fazer uma breve referência.
Eu apresentei muito sobre o método do Bootstrap de fazer o upload de imagens usando o plug-in de entrada de arquivo. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!