Se você não conhece a configuração do Bootstrap-FileInput, pode verificar o site oficial: http://plugins.krajee.com/file-input.
Descrição lógica: primeiro obtenha a exibição de dados do plano de fundo e, em seguida, edite -os.
Sem mais delongas, basta fazer o upload do código.
1. Código da peça da página:
<div> <gravadora para = "inputEmail3"> logotipo do projeto </elabel> <div> <input id = "testlogo" type = "file" name = "iCofile"/> <input type = "text" name = "htestlogo" id = "htestlogo" onchange = "addfile (this)">
Nota: Onde o OnChange () é exigido pela minha empresa e um evento de adição será executado automaticamente após a conclusão do upload. Este método pode ser removido.
2. Obtenha o método de dados de inicialização:
// Inicialize para obter o arquivo original $ (function () {$ .ajax ({type: "post", url: "/eim/project/testfileupload.do", datatype: "json", succelT: function (dados) {camada.msg ('Operação succeds!'); ShowPhoTS (Data) {Data) {Layer.sg ('Operação succeds!'); ertrorthRown) {Layer.msg ('Operação falhou!');Descrição: Aqui eu devolvo uma matriz de objetos: List <MemberUser>, que pode ser entendida como colocando todos os alunos em uma aula e exibindo avatares
3. Inicialize o componente de bootstrap-fil-fileinput:
função showphotos (djson) {// retorna a string json para um objeto JSON no plano de fundo var redata = avaliação (djson); // Visualize a imagem JSON Data Group var prelist = new Array (); for (var i = 0; i <redata.length; i ++) {var Array_Element = redata [i]; // Here we refer to the judgment for .txt, and add the rest to yourself if(array_element.fileIdFile.name.indexOf("txt")>0){ // Display of non-image types preList[i]= "<div class='file-preview-other-frame'><div class='file-preview-other'><span class='file-icon-4x'><i class='fa FA-FILE-TEXT-O Texto-Info '> </i> </span> </div> </div> "} else {// Tipo de imagem prelist [i] =" <img src =/"/eimeent/upload/getImg.do? SalvePath ="+Array_Element.FileidFile.FilePath+" class =/"File-preview-image/"> "; }} var previewjson = prelist; // Dados de configuração correspondentes ao grupo de dados JSON da imagem de visualização acima var preconfiglist = new Array (); for (var i = 0; i <redata.length; i ++) {var Array_Element = redata [i]; var tjson = {legenda: array_element.fileidfile.filename, // a largura do nome do arquivo exibido: '120px', url: '/eim/project/deletefile.amm », // excluir a tecla: Array_Element.id, // DELETE é o parâmetro'. pré -figlist [i] = tjson; } // Query the specific parameters by yourself.fileinput({ uploadUrl: '/eim/upload/uploadFile.do', uploadAsync:true, showCaption: true, showUpload: true,//Whether the upload button is displayed, showRemove: false,//Whether the delete button is displayed, showCaption: true,//Whether the input box is displayed, ShowPreview: True, ShowCancel: True, DropZoneEnabled: False, MaxFilECount: 10, InitialPreviewSowDelete: True, MsgFileStoomany: "Selecione o número de arquivos carregados excede o valor máximo permitido!", InitialPreview: Visuewjson, ReviewFileEs: '<i>> </eu> VIVIEWFILEICONSETTINGS: {'docx': '<i> </i>', 'xlsx': '<i> </i>', 'pptx': '<i> </i>', 'pdf': '<i> </i>,' zip ':' <i> </i> '' ql ': PreConfiglist}). Off ('filepreupload'). A atribuição de entrada correspondente $ ('#htestlogo'). Val (resultado) .Change (); }4. O back -end Java salva parte do código do arquivo
@RequestMapping(value="/uploadFile",method=RequestMethod.POST) @ResponseBody public Object uploadFile(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //Convert to MultipartHttpServletRequest MultipartHttpServletRequest multipartRequest = (MultiparthttpServletRequest) solicitação; // Obtenha o arquivo no mapa de contêineres do mapa <string, multipartfile> filemap = multipartrequest.getFilemap (); // Obtenha o parâmetro do caminho passado pela página da página = request.getParameter ("pasta"); String rootpath = baseconfig.uploadpath; String filepath = rootpath + pastaPath + "/"; // Carregar o arquivo e retornar o contêiner do mapa, o mapa armazena informações de arquivo filemodel filemodel = uploadifyutils.uploadfiles (filepath, filemap); bandeira booleana = service.add (filemodel); if (flag) {string resultado = filemodel.getId ()+";"+filemodel.getFilePath ()+";"+filemodel.getName ()+";"+filemodel.getFilePath (); Mapa mapa = novo hashmap <> (); map.put ("id", filemodel.getId ()); // Return Arquivo Salvar ID //Response.getWriter( ).Write(map); mapa de retorno; } retornar nulo; }NOTA: Este código obtém parte das informações do arquivo enviado, como o nome do arquivo, o caminho carregado etc., e salva as informações do arquivo na tabela e o objeto correspondente é FilEmodel.
5. Atualize o componente após a conclusão do upload.
Efeito final da exibição:
NOTA: Aqui nos referimos ao julgamento do tipo de arquivo txt. Para o restante do DOC e PPT, existem ícones de exibição correspondentes. Você só precisa adicionar o estilo correspondente ao determinar se deve julgar.
Anexo: De acordo com o caminho do caminho do passado/download do arquivo:
/** * Download do arquivo * * @param savepath * salvar diretório * nome @param * arquivo original * o nome ao salvar contém o sufixo * @param request * @param Resposta * @return */public static string Down (string salvAtpath, string Nome, string filename, httpSertLeTreTereTrewest, hTTPSTPath, resposta) {Tryname {Tryname, {Tryname, {Tryname, {Tryname, {Tryname, {try -line, {try -line, {tryname, {try -line, {tryname, {try -line, {tryname, {try -line, {tryname, httpSletLeTreTereTrewest, htttletPath). Arquivo de arquivo = novo arquivo (caminho); if (! file.exists ()) {// request.setattribute ("name", nome do arquivo); retornar "Download_error"; // retornar o arquivo de download não existe} Response.setContentType ("Application/Octet-Stream"); // Defina a sequência de cabeçalho da resposta userAgent = request.getheader ("user-agent"). ToLowerCase (); if (userAgent.indexOF ("msie")! = -1) {// ie navegador // system.out.println ("ou seja, navegador"); Response.AddHeader ("Content-Disposition", "Applement; filename =" + urlencoder.encode (nome, "utf-8")); } else {Response.addHeader ("Content-Disposition", "Appion; filename =" + new String (name.getBytes ("UTF-8"), "Iso8859-1")); } Response.addHeader ("Length-comprimento", "" + file.length ()); // Faça o download do arquivo na forma de um fluxo inputStream fis = new bufferInputStream (new FileInputStream (caminho)); byte [] buffer = novo byte [fis.Available ()]; fis.read (buffer); fis.close (); //RESPOnse.setContentType("image/* "); // Definir tipo de retorno Tipo de arquivo outputStream toClient = Response.getOutputStream (); OutputStream bos = new BufferoudOutputStream (ToClient); // bufferwriter bw = new bufferwriter (novo outputStreamWriter (BOS)); bos.write (buffer); //bw.close (); bos.close (); toClient.close (); retornar nulo; } catch (Exceção e) {e.printStackTrace (); //RESPOnse.reset (); retornar "Exception"; // retornar à página de exceção} finalmente {/* if (toClient! = null) {try {toClient.close (); } catch (ioexception e) {e.printStackTrace (); }}*/}}Apegado:
UploadifyUtils.Uploadfiles parte do código
public static filemodel uploadfiles (string savepath, map <string, multipartfile> filemap) {// carrega o arquivo // modelo de anexo objeto filemodel fm = new filemodel (); tente {arquivo file = new File (savePath); // determinar se a pasta existe e, se não existe, crie a pasta makedir (arquivo); if (filemap! = null) {for (map.entry <string, multipartfile> entidade: filemap.entryset ()) {multipartFile f = entity.getValue (); if (f! = null &&! f.isEmpty ()) {string uuid = uploadifyutils.getuuid (); // uuid é o nome do arquivo ao salvar string ext = uploadifyutils.getFileExt (f.GetoriginalFilename (); // obtenha o arquivo // surp file); F.Transferto (NewFile); fm.setFilename (f.getoriginalfilename ()); fm.setName (uuid+"."+ext); fm.setFilePath (salveira); // Salvar caminho fm.setext (ext); fm.SetSize (f.getSize ()); }} retornar FM; } catch (Exceção e) {log.error (e); retornar nulo; }}O acima exposto é o upload e a edição do FileInput no Bootstrap apresentado a você pelo editor. 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!