Si no conoce la configuración de Bootstrap-FileInput, puede consultar el sitio web oficial: http://plugins.krajee.com/file-input.
Descripción lógica: Primero obtenga la pantalla de datos desde el fondo y luego edítelo.
Sin más ADO, solo suba el código.
1. Parte del código de página:
<div> <etiqueta for = "inputemail3"> LOGO DE PROYECTO </label> <div> <input id = "testLogo" type = "file" name = "icofile"/> <input type = "text" name = "htestlogo" id = "htestlogo" onchange = "addfile (this)"> </div> </iv>
Nota: donde mi negocio requiere OnChange (), y un evento de adición se ejecutará automáticamente después de completar la carga. Este método se puede eliminar.
2. Obtenga el método de datos de inicialización:
// Initialize to get the original file $(function(){ $.ajax({ type : "post", url : "/eim/project/testFileUpload.do", dataType : "json", success : function(data) { layer.msg('operation succeeds!'); showPhotos(data); }, error: function(XMLHttpRequest, textStatus, ERRORTHROWN) {LACE.MSG ('Operación fallida!');Descripción: Aquí devuelve una matriz de objetos: Lista <MemberUser>, que puede entenderse como llevar a todos los estudiantes en una clase y mostrar avatares
3. Inicializar el componente de Bootstrap-FileInput:
función showphotos (djson) {// Devuelve la cadena JSON a un objeto JSON en el fondo var redata = eval (djson); // Vista previa de la imagen JSON Data Group Var Prelist = New Array (); for (var i = 0; i <redata.length; i ++) {var array_element = redata [i]; // Aquí nos referimos al juicio para .txt, y agreguemos el resto a usted mismo if (array_element.fileidfile.name.indexof ("txt")> 0) {// visual FA-File-Text-O Text-Info '> </i> </span> </div> </div> "} else {// Image type prelist [i] =" <img src =/"/eim/upload/getImg.do class =/"File-Preview-Image/"> "; }} var priewjson = prelist; // Datos de configuración correspondientes al grupo de datos JSON de la imagen de vista previa arriba Var preconfigList = new Array (); for (var i = 0; i <redata.length; i ++) {var array_element = redata [i]; var tjson = {Cuttion: array_element.fileidfile.fileName, // El ancho del nombre del archivo mostrado: '120px', url: '/eim/project/deleteFile.do', // Eliminar la tecla URL: array_element.id, // Elimeter es el parámetro pasado por AJax a la de fondo: {id: 100} preconfiglist [i] = tjson; } // Consulte los parámetros específicos por usted mismo. showPreview:true, showCancel:true, dropZoneEnabled: false, maxFileCount: 10, initialPreviewShowDelete:true, msgFilesTooMany: "Select the number of uploaded files exceeds the maximum allowed value!", initialPreview: previewJson, previewFileIcon: '<i></i>', allowedPreviewTypes: ['image'], PreviewFileConSettings: {'Docx': '<i> </i>', 'xlsx': '<i> </i>', 'pptx': '<i> </i>,' pdf ':' <i> </i> ',' zip ':' <i> </i> ',' sql ':' <i> </i> ', óptico, inicial, inicial. preconfigList}). Off ('filePreUpload'). on ('filePreUpload', function () {// alerta (data.url);}). En ("fileUploaded", function (event, acuartate) {// Los datos devueltos después del archivo están cargados con éxito, aquí solo guarda el archivo ID del archivo devuelto. asignación de entrada $ ('#htestlogo'). Val (resultado) .Change (); }4. Backend Java guarda parte del código de archivo
@RequestMapping (valor = "/uploadFile", método = requestmethod.post) @ResponseBody Public Object uploadFile (httpservletRequest request, httpServletResponse Respuesta) lanza ServletException, ioexception {// convertir a multipThtttPservletRequest multiparThtTpServletRequest multeRArTeCeTeC) (Solicitud multipThttpServletRequest); // Obtener el archivo en el mapa del contenedor MAP <string, multipartFile> fileMap = multiparTruCest.getFileMap (); // Obtenga el parámetro de ruta pasada por la carpeta de página = request.getParameter ("carpeta"); Cadena rootPath = baseconfig.uploadPath; Cadena filepath = rootpath + carpeta + "/"; // cargar el archivo y devolver el contenedor de map, el mapa almacena información del archivo fileModel fileModel = uploadifyUtilss.uploadFiles (filePath, fileMap); Boolean Flag = Service.Add (fileModel); if (flag) {string dult = fileModel.getId ()+";"+fileModel.getFilePath ()+";"+fileModel.getName ()+";"+fileModel.getFilePath (); Mapa map = nuevo hashmap <> (); map.put ("id", fileModel.getId ()); // Devuelve el archivo Guardar ID //Response.getWriter().Write(map); mapa de retorno; } return null; }NOTA: Este código obtiene parte de la información del archivo cargado, como el nombre del archivo, la ruta cargada, etc., y guarda la información del archivo en la tabla, y el objeto correspondiente es fileModel.
5. Actualice el componente después de completar la carga.
Efecto de visualización final:
Nota: Aquí nos referimos al juicio de tipo de archivo TXT. Para el resto de DOC y PPT, hay iconos de pantalla correspondientes. Solo necesita agregar el estilo correspondiente al determinar si juzgar.
Archivo: de acuerdo con el código de archivo Path Pass/Descargar:
/** * File download* * @param savePath * Save directory* @param name * Original file * The name when saving contains the suffix* @param request * @param response * @return */ public static String down(String savePath, String name, String fileName, HttpServletRequest request, HttpServletResponse response) { try { String path = savePath + "/" + name; Archivo archivo = nuevo archivo (ruta); if (! file.exists ()) {// request.setAttribute ("nombre", nombre de archivo); return "download_error"; // return el archivo de descarga no existe} respuesta.setContentType ("Application/Octet-stream"); // Establezca la cadena de encabezado de la respuesta userAgent = request.getheader ("user-agent"). TOlowerCase (); if (userAgent.IndexOf ("msie")! = -1) {// es decir, navegador // system.out.println ("es decir, navegador"); Respuesta.AddHeader ("Disposición de contenido", "Adjunto; FileName =" + URLENCODER.Encode (nombre, "UTF-8")); } else {Response.AddHeader ("Content-Disposition", "Adjunto; FileName =" + new String (name.getBytes ("UTF-8"), "ISO8859-1"); } Respuesta.AddHeader ("Content-Length", "" + file.length ()); // Descargue el archivo en forma de un flujo inputStream FIS = new BufferedInputStream (nuevo FileInputStream (PATH)); byte [] buffer = new byte [fis.available ()]; fis.read (búfer); fis.close (); //Response.SetContentType("image/* "); // Establecer el tipo de archivo de retorno outputStream toClient = respuesta.getOutputStream (); OutputStream Bos = new BufferedOutputStream (TOClient); // BufferedWriter bw = new BufferedWriter (nuevo OutputStreamWriter (BOS)); bos.write (búfer); //bw.close (); bos.close (); tOclient.close (); regresar nulo; } catch (Exception e) {E.PrintStackTrace (); //Response.reset (); return "Exception"; // Regrese a la página de excepción} Finalmente {/* if (tOclient! = null) {try {toClient.close (); } catch (ioException e) {E.PrintStackTrace (); }}*/}}Adjunto:
UploadifyUtils.uploadfiles parte del código
public static fileModel uploadFiles (String savePath, map <string, multipartfile> fileMap) {// cargar el archivo // objeto de archivo adjunto fileModel fm = new FileModel (); intente {archivo archivo = nuevo archivo (savePath); // determinar si la carpeta existe, y si no existe, cree la carpeta Makedir (archivo); if (fileMap! = null) {for (map.entry <string, multipartfile> entity: fileMap.EntrySet ()) {multipartfile f = entity.getValue (); if (f! = null &&! f.isEmpty ()) {string uuid = uploadififyUtils.getuuid (); // uuid es el nombre de archivo al guardar String ext = uploadififyUtils.getFileExt (f.getOriginalFileName (); // sufix // Guardar archivo Archivo neo F.Transferto (Newfile); fM.SetFileName (f.getOriginalFileName ()); fM.SetName (uuid+"."+ext); fM.SetFilePath (SavePath); // Guardar ruta fm.setext (ext); fm.setsize (f.getSize ()); }} return fm; } capt (excepción e) {log.error (e); regresar nulo; }}Lo anterior es la carga y edición de FileInput en Bootstrap presentada por el editor. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje y el editor le responderá a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!