ArtDialog+plupload implementa la carga de múltiples archivos

Introducción a la plupia

PLUPLOAD es desarrollado por desarrolladores de TinyMCE, proporcionando un complemento de carga altamente disponible para su sistema de administración de contenido o programas de carga similares. PLUPLOAD se divide actualmente en una API central y un componente de cola de carga jQuery, que le permite usarlo directamente o personalizarlo usted mismo.

1. Muestra de efecto

Incluyendo el panel de carga de archivos y la lista de carga de archivos

2. Introducción

Para dejarlo corto, Spring SpringMVC MyBatis Maven MySQL se usa para realizar la función de carga de múltiples archivos, y la descarga utiliza la forma de transmisiones.

Abriré otro blog para presentar las páginas involucradas.

3. Prepare materiales

plupa

artdialog

También hay un archivo JS que inicializa el complemento

Estos se pueden descargar directamente de mi conexión compartida

Enlace: http://pan.baidu.com/s/1c27ctak contraseña: btqj

También hay descarga jQuery

4. Código de recepción

Introducir estilos y archivos JS

 <link rel = "stylesheet" href = "recursos/css/plupload.css" type = "text/css"> <script src = "recursos/js/jQuery.min.js"> </script> src = "recursos/artdialog4.1.7/artdialog.source.js? skin = blue"> </script> <script src = "recursos/js/upload.js"> </script>

código JS

_PlUPLOAD (UUID BINDE, ruta de carga de archivos); ① Con respecto a UUID, déjame dar un ejemplo. La identificación del usuario actual es UUID. Puede asociar la ID de usuario con el archivo que carga. Si consulta en el futuro, puede consultar todos los archivos cargados por la ID de usuario de acuerdo con la ID de usuario. ② Este método está encapsulado y se puede ver en cargar.js. Los comentarios en mi artículo son muy claros, y también puede consultar el documento oficial.

 $ (function () {3 $ ('#uploadbtn'). click (function () {popupDialog ();}); _plupload ('test', '$ {pageContext.request.contextPath}/uploadFile');});

Código de página, un botón, un cuadro emergente

 <a id = "uploadbtn" href = "#"> cargar archivo </a> <!-activar el cuadro emergente-> <div id = "uploadContent" style = "visual id = "uploadify" href = "javaScript: void (0);"> seleccione archivo </a> </div> <divi ID = "uploadFilequeue" style = "border: 1px sólido #a7c5e2; altura: 228px; ancho: 350px;"> </div> </div> <pre id = "console"> </ pre>

5. Código de fondo

No tengo un método para encapsularlo, por lo que puedo encapsularlo yo mismo para verlo claramente

 / ** * Solicitud de solicitud de carga de archivo * * @param Solicitud * @param Respuesta */ @RequestMapping ("uploadFile") public void upload (httpservletRequest request, httpServletResponse respuesta) {multiparthtttpSeVletRequest multiprequest = (multipThttttTpSeBretRequest;// binary uparnTpSeBARTRequest multipTrequest = ((multipThttttttTpSeBretRequest;// binary Upload Upload UploadMeSequest MultipTrequest = (((multe (CommonsMultipartFile) multiparTruCeest.getFile ("file"); // get file string unid = uuid.randomuuid (). ToString (). Reemplazar ("-", "");/* archivo primario*/ string original = file.getOriginalFileName ();/* Nombre de archivo original, incluyendo el sufix*/ String Flies Fliesizeizeizeizeizeizeizeizeizeizeize String.ValueOf (file.getSize ());/* size de archivo*/ string path = null;/* Path de almacenamiento de archivos*/ string punid = request.getParameter ("punid"); / * File Associated Punid */// Guardar archivo if (file! = Null) {try {string basepath = request.getSession (). GetServletContext (). GetRealPath ("/uploadFile"); SimpleDateFormat sdf = new SimpleDateFormat ("/yyyy/mm/dd/"); Cadena subpath = sdf.format (nueva fecha ()); ruta = basepath + subpath + unid + file.separator + originalFileName; // Si la carpeta no existe, cree un archivo de carpeta dir = nuevo archivo (ruta); if (! dir.exists ()) {dir.mkdir (); } file.transferto (Dir); } catch (Exception e) {E.PrintStackTrace (); }} // Conversión de tamaño de archivo Long kb = 1024; largo MB = KB * 1024; GB largo = MB * 1024; tamaño largo = long.parselong (Fliesize); if (size> = gb) {fliesize = string.format ("%. 1f Gb", (flotación) size / gb); } else if (size> = mb) {float f = (float) size / mb; fliesize = string.format (f> 100? "%.0f mb": "%.1f mb", f); } else if (size> = kb) {float f = (float) size / kb; fliesize = string.format (f> 100? "%.0f kb": "%.1f kb", f); } else {fliesize = string.format ("%d b", tamaño); } // almacenar información del archivo en la base de datos FileUpload fileUpload = new FileUpload (); fileUpload.setUnid (UNID); fileUpload.SetOriginalFileName (originalFileName); fileUpload.setFliesize (Fliesize); fileUpload.setPath (ruta); fileUpload.setPunId (punid); SimpleDateFormat df = new SimpleDateFormat ("yyyy-mm-dd hh: mm: ss"); fileUpload.setflietime (df.format (nueva fecha ())); fileUploadService.insert (fileUpload); }

Aquí viene un método de descarga, que es usar transmisiones de archivos para descargar de acuerdo con el ID de archivo

 @RequestMapping ("downloadfile") public void downloadloadFile (httpservletRequest solicitud, respuesta httpservletResponse) {string unid = request.getParameter ("unid"); FileUpload fileUpload = fileUploadService.SelectByPrimaryKey (UNID); if (fileUpload! = null) {try {string filename = new String (fileUpload.getOriginalFileName (). GetBytes ("GBK"), "ISO-8859-1"); String path = fileUpload.getPath (); respuesta.setcharacterEncoding ("UTF-8"); respuesta.setContentType ("Application/Octet-stream"); Respuesta.setheader ("Disposición de contenido", "Adjunto; FileName =" + FileName); respuesta.setheader ("content-longitud", fileUpload.getfliesize ()); InputStream InputStream = new FileInputStream (nuevo archivo (ruta)); OutputStream OS = Response.getOutputStream (); byte [] b = nuevo byte [2048]; int longitud; while ((longitud = inputStream.read (b))> 0) {os.write (b, 0, longitud); } os.close (); inputStream.close (); } catch (FileNotFoundException e) {E.PrintStackTrace (); } catch (ioException e) {E.PrintStackTrace (); }}}

También hay una forma de eliminarlo

 / ** * DELECIÓN DE ARCHIVO * * @param Solicitud * @param Respuesta */ @ResponseBody @RequestMapping ("Delfile") Map público <String, Object> Defile (HttpServletRequest Solicitud, respuesta httpServletResponse) {String unid = request.getParameter ("unid"); FileUpload fileUpload = fileUploadService.SelectByPrimaryKey (UNID); // eliminar la bandera booleana local = falso; Archivo archivo = nuevo archivo (fileUpload.getPath ()); if (file.exists ()) {// Si la ruta es un archivo y no está vacía, elimina flag = file.delete (); } // Eliminar la base de datos int resultado = fileUploadService.DeleteByPrimaryKey (UNID); if (resultado> 0) {flag = true; } Map <string, object> map = new HashMap <String, Object> (); map.put ("resultado", bandera); mapa de retorno; }

Lo anterior es el artdialog+plupload presentados 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!