Primero tire la dirección, http://fex-team.github.io/webuploader/
Hay un documento de caso de demostración relativamente completo. Este artículo agrega principalmente una gran cantidad de comentarios basados en la carga de archivos y la carga de imágenes, lo que básicamente garantiza que cada línea de código tenga comentarios para ayudar a comprender. Es una versión mejorada de la demostración oficial del sitio web. Espero que pueda ayudar a todos a comprender mejor el complemento.
Primero, la carga de archivos
jQuery (function () {var $ = jQuery, $ list = $ ('#theList'), $ btn = $ ('#ctlbtn'), state = 'pending', uploader; // inicialización, en realidad puede acceder directamente a webuploader.uploader uploader = webuploader.create ({{{// cebada resume: renatear: //////// / swef swf Base_url + '/js/uploader.swf', // Enviar al código de fondo para procesar y guardar en el servidor del servidor: 'http://webuploader.duapp.com/server/fileUpload.php', // seleccione el botón para seleccionar el archivo. }); /El cargador agrega un evento. '</h4>' + '<p> Espere ... </p>' + '</div>'); '#' + file.id), // Encuentra el progreso de la clase bajo $ Li y defina como $ porcentaje ------ Por qué primero busca crear $ porcentaje = $ li.find ('. Progress .Progress-Bar'); '</div>' + '</div>'). AppendTo ($ li) .find ('. Progress-Bar'); Este evento al cargar correctamente por parte de la carga de carga.on ('uploadSuccess', function (file) {// El evento activado cuando se agrega el archivo, findState y agregue el texto como $ ('#'+file.id) .find ('p.state'). Text ('cargado');}); 'uploadError', function (file) {// El evento activado cuando se agrega el archivo, findstate y agrega el texto como error de carga $ ('#'+file.id) .find ('p.state'). Text ('Error de carga') ) {// llamar a $ ('#'+file.id) .find ('. Progress'). FadeOut (); if (type === 'StopUppload') {state = 'Paused'; Cuando se hace clic en el botón, la carga se inicia de acuerdo con el estado o la pausa $ btn.on ('hacer clic', function () {if (state === 'carging') {uploader.stop ();} else {ujeer.upload ();}});});Luego sube la imagen
jQuery (function () {// asignar jQuery a una variable global var $ = jQuery, $ list = $ ('#fileList'), // optimizar retina, en retina, este valor es 2, la relación de relación píxel de dispositivo = 100 * ratio, thumbePixelratio || 1, // taller thumbnailwidth = 100 * ratio, thumbnailHeight, = 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * 100 * RatiMaily, Subiendo el cargador de cargadores; 'http://webuploader.duapp.com/server/fileUpload.php', // Seleccione el botón de archivo. 'gif, jpg, jpeg, bmp, png', mimetypes: 'image/*'}}); Info '<ivr>' + file.name + '</iv>' + '</div>'), $ img = $ li.find ('img'); // La devolución de llamada tiene dos parámetros. thumbnailHeight); $ ('<p> <span> </span> </p>') .AppendTo ($ li) .find ('span'); '#'+file.id) .AddClass ('upload-state-done'); $ ('<div> </div>'). AppendTo ($ li);A continuación se muestra el código de fondo Java, utilizado para obtener archivos cargados y escribir la ruta real de los archivos cargados en el servidor
1. En primer lugar, debemos crear una ubicación de almacenamiento para los archivos cargados. La ubicación general se divide en carpetas temporales y reales. Luego necesitamos obtener las rutas absolutas de estas dos carpetas. En el servlet, podemos hacer esto.
ServletContext Application = this.getServletContext (); Cadena tempDirectory = Application.GetRealPath (constant.temp_directory) + "/"; String realDirectory = Application.getRealPath (constant.real_directory) + "/";
Luego cree una fábrica de archivos, es decir, un almacén, un parámetro indica qué tan grande es almacenar al ras.
La copia del código es la siguiente: FileItemFactory Factory = new DiskFileItemFactory (constant.size_threshold, nuevo archivo (tempDirectory));
ServletFileUpload upload = new ServLetFileUpload (fábrica);
2. Configure los archivos cargados
cargar
List <StilEitem> list = upload.parserequest (solicitud); Iterator <StilEitem> iter = list.iterator (); while (iter.hasnext ()) {fileItem item = iter.next (); //item.isformfield () se usa para determinar si el objeto actual son los datos del campo Formulario de archivo. Si el valor de retorno es verdadero, significa que no es un campo de forma normal si (item.isformfield ()) {System.out.println ("Campo de formulario normal" +item.getFieldName ()); System.out.println (item.getString ("UTF-8")); } else {//system.out.println("ile Form Field " + item.getFieldName ()); /** Solo el campo Formulario de archivo escribe el contenido en el objeto a la carpeta real*/string lastPath = item.getName (); // Obtenga el nombre del archivo cargado LastPath = LastPath.Substring (lastPath.lastIndexOf (".")); Cadena filename = uuid.randomuuid (). ToString (). Reemplazar ("-", "") + lastPath; item.write (nuevo archivo (realDirectory+nombre de archivo)); paquete com.lanyou.support.servlet; import java.io.file; import java.io.ioexception; import java.io.printwriter; import java.util.list; import javax.servlet.servletexception; import javax.servlet.http.httpservlet; importar; import javax.servlet.http.httpservletRequest; import javax.servlet.http.httpservletResponse; import net.sf.json.jsonObject; import org.apache.commons.fileupload.fileitem; import org.apache.commons.fileupload.fileitemy; org.apache.commons.fileupload.disk.diskfileitemFactory; importar org.apache.commons.fileupload.servlet.servletfileUpload; importar org.apache.commons.logging.log; importar org.apache.commons.logging.logfactory; org.apache.commons.logging.logFactory; import org.apache.struts2.servletactionContext; public class FileUpload extiende httpservlet {private static final long serialVersionUid = 1l; Private static log logger = logFactory.getLog (fileUpload.class); @Override protegido void doget (httpservletRequest req, httpservletResponse resp) lanza ServletException, ioexception {dopost (req, resp); } @Override protegido void dopost (httpservletrequest req, httpservletreSponse resp) lanza ServletException, ioexception {// cargar archivo con el evento Tipo 1 2apk String t = req.getParameter ("t") == null? "1": req.getParameter ("t") .trim (); Ruta de cadena = ""; JsonObject ob = new JsonObject (); Pruebe {// tarea encapsular cada elemento en el mensaje de solicitud en un objeto de archivo de disco separado // guárdelo en la memoria cuando los elementos de archivo cargados son pequeños, y guárdelo en el disco cuando el disco es cero.//create un archivo warehouse (fábrica) fileitemFactory factory = new DiskfileItemFactory (); ServletFileUpload ServLetFileUpload = new ServLetFileUpload (fábrica); // Establezca el archivo cargado ServletFileUpload.SetSizEmaMax (1024 * 1024 * 2); // Datos máximos de 2m ServletFileUpload.SetFileSizeMax (2 * 1024 * 1024); servletFileUpload.setheaderEncoding ("UTF-8"); // Resuelve el problema de los nombres de archivos confusos // Resuelve el cuerpo de la solicitud, obtiene el archivo cargado y escribe la ruta real si no se lanza la excepción // Obtener la lista de archivos de acuerdo con la lista de solicitudes <fileitem> fileItemSlist = servletfileUpload.parserequest (req); // Obtener un objeto de archivo separado de la lista de archivos para (FileItem item: FileItemSlist) {// Determine si el archivo es un tipo de formulario ordinario, donde el tipo de archivo entra en el juicio if (! Item.isformfield ()) {// Si el archivo cargado es mayor que el tamaño especificado, return if (litgetSize ()> 2 * 1024 * 1024) {regreso; } // System.out.println ("El tamaño del archivo cargado:"+item.getSize ()); // System.out.println ("Tipo de archivo de carga:"+item.getContentType ()); // System.out.println ("Nombre del archivo de carga:"+item.getName ()); // cargar el nombre del archivo String FileName = item.getName (); String ent = ""; // Content Type if (item.getContentType (). EqualSignorEcase ("Image/X-Png") || item.getContentType (). EqualSignorEcase ("Image/png")) {ent = ".png"; } else if (item.getContentType (). EqualSignorEcase ("Image/GIF")) {ent = ".gif"; } else if (item.getContentType (). EqualSignorEcase ("Image/BMP")) {ent = ".bmp"; } else if (item.getContentType (). EqualSignorEcase ("Image/Pjpeg") || item.getContentType (). EqualSignorEcase ("Image/jpeg")) {ent = ".jpg"; } // ¿Qué formato es obtener el archivo if (filename.lastindexof (".")! = -1) {ent = filename.substring (filename.lastindexof (".")); } filename = "ev_" + system.currentTimemillis () + ent; // Defina la ruta del archivo, dependiendo de la estructura de su carpeta, es posible que deba hacer cambios si (T.Equals ("1")) {Path = "upload/ev/" + filename; } else {path = "cargar/pk/" + nombre de archivo; } // Guarde el archivo en el archivo del archivo del servidor = nuevo archivo (req.getSession (). GetServletContext () .getRealPath (PATH)); if (! file.getParentFile (). exists ()) {file.getParentFile (). MkDirs (); } item.write (archivo); // logger.info (ruta); // romper; ob.acumulado ("url", ruta); }} resp.setContentType ("text/html; charset = utf-8"); resp.getwriter (). Write (ob.ToString ()); } catch (Exception e) {E.PrintStackTrace (); } Finalmente {// Respuesta Cliente // Resp.SetContentType ("Text/Html; Charset = UTF-8"); // resp.getwriter (). Write (ob.ToString ()); }}}Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.