1. Descripción de los motivos para usar el complemento Webupploader
Fui engañado por el proyecto que estoy haciendo ahora.
Permítanme hablar primero sobre mi proyecto Arquitectura Spring+Struts2+MyBatis+MySQL
Entonces que. Se acordó que sería suficiente cargar según 2G, por lo que utilicé el complemento AjaxFileUpload. Debido a que usé esto para cargar imágenes antes, lo usé directamente al cargar el archivo adjunto.
Se han probado varios códigos y códigos. No hay problema con la carga de archivos 2G. El truco vino. Después de que se lanzó el proyecto, el cliente pidió subir archivos 4G, e incluso había más de 20 g. . Nani, no lo dijiste antes. . .
En IE11, use el complemento AjaxFileUpload.js para cargar archivos que excedan 4G, y IE lanza directamente una excepción. Un mensaje con resultado aritmético que excede los 32 bits emergentes.
Como se muestra en la figura a continuación:
Como nota adicional, mi sistema es de 64 bits, 8 g de memoria, el navegador Google y el navegador IE11 son todos de 32 bits. Es un problema cargar 8g usando AjaxFileUpload en Google. No se informarán errores.
IE11 tiene más de 4G y está mal informar directamente la imagen de arriba. de ninguna manera. Cambie el complemento.
2. Selección de complementos
1. Stream Subiendo el complemento. Stream es un complemento para resolver el problema de cargar archivos por diferentes navegadores. Es una combinación de la versión flash de Uploadify y HTML5. Dirección del complemento http://www.twinkling.cn/
La función es de hecho muy poderosa, pero el estilo CSS es fijo, que es muy diferente del estilo de la barra de progreso de mi proyecto actual. Renunciar a este complemento
2. complemento de vegetador. Webuploader es un componente de carga de archivos moderno simple principalmente HTML5 y complementado por Flash desarrollado por el equipo de Baidu Webfe (FEX). En los navegadores modernos, podemos dar un juego completo a las ventajas de HTML5, sin abandonar los principales navegadores de IE, y continuar usando el tiempo de ejecución de flash original, y son compatibles con IE6+, iOS 6+ y Android 4+. Los usuarios pueden seleccionar el mismo método de llamadas a voluntad.
El uso de la carga concurrente de fragmentación de archivos grandes mejora enormemente la eficiencia de la carga de archivos. Dirección del complemento http://fex.baidu.com/webuploader/
Este complemento puede personalizar los estilos CSS. Las funciones también son muy poderosas, por lo que adopté decisivamente este complemento.
3. Subida de archivo de un solo archivo webuploader
Estoy usando webuploader versión 0.1.5. Webuploader corta principalmente archivos grandes en el cliente, como enviar solicitudes para fragmentar cada 5 m y recibir archivos de los antecedentes para fusionar archivos. Hay dos formas de fusionar archivos. El primero es pasar todos los fragmentos al fondo y luego fusionarlos. Esto es para garantizar que el orden de fragmento sea correcto, y el segundo es fusionarse mientras fragmenta. Usé el segundo en el proyecto. La carga de archivos con el cargador web requiere tres recursos: JS, CSS y SWF.
1. Introducir archivos JS
<script type = "text/javascript" src = "../ main/js/webuploader.js"> </script> <script type = "text/javascript" src = "../ main/js/webuploader.min.js"> </script>
2. Introducir estilo CSS
<link href = "../ main/css/webuploader.css" rel = "stylesheet" type = "text/css"/>
3. Introducir SWF . SWF no se refiere a él directamente. Simplemente especifique la ruta SWF cuando se inicialice el subuplete web.
4.Pload3.html
< xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "ja" lang = "ja"> <fead> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <meta http-equiv = "content con contenido" /> <meta http-equiv = "content-script-type" content = "text/javaScript"/> <meta http-equiv = "content-style-type" content = "text/css"/> <title> demo </title> <link href = "../ main/css/stream-v1.css" rel = "styles styles type" types " /> <link href = "../ main/css/webuploader.css" rel = "stylesheet" type = "text/css"/> <script type = "text/javascript" src = "../ main/js/jQuery-1.11.1.min.js"> </script> <script type = "text/javascript" "" " src = "../ main/js/jQuery-2.1.4.min.js"> </script> <script type = "text/javaScript" src = "../ main/js/jQuery-ui.min.js"> </script> <script type = "text/javaScript" src = "../ main/js/bootstrap-datepicker.min.js"> </script> <script type = "text/javaScript" src = "../ main/js/bootstrap-datepicker.min.js"> </script> <script type = "text/javaScript" src = "../ main/js/locales/bootstrap-datepicker.ja.min.js"> </script> <script type = "text/javascript" src = "../ main/js/webuploader.js"> </script> <script type = "text/javaScript" src = "../ main/js/webuploader.min.js"> </script> <script type = "text/javascript" src = "../ js/contents/upload3.js"> </script> <body> <diR Id = "uploader"> <!-Se usa para almacenar información de archivo-> <Div Id = "thelist"> </divive <diviv id = "adjunto"> </div> <input type = "Button" value = "floading" id = "upload"/> </div> </div> <div id = "portaader1"> <! --- utilizado para almacenar información de archivo-> <div it = "theList1"> </div> <div> <div it = "multi"> </div> <input type = "button" value = "upload" upload "upload" upload "" upnOW "Id" id " </div> </div> </body> </html>
La imagen es relativamente simple, se ve así
5.Pload3.js
Incluyendo carga de un solo archivo, carga de múltiples archivos y múltiples instancias de Webuploader
/************************************************************/$(function(){var $list = $("#thelist");var uploader ;// Instantiated uploader = WebUploader.create({ auto:false, // Whether to automatically upload pick: {id: '#attach',name:"file", // This place name It's inútil. // FileVal: 'MultiFile', // Personaliza el atributo de nombre del archivo. El archivo no se puede recuperar al usar el archivo // se recomienda que el autor tenga tiempo para cambiar este lugar, matará a las personas. servidor: "ContentsDetail! AJAXATTACHUPLOAD.ACTION", duplicado: true, // es el mismo archivo en cambio: falso, formdata: {"status": "file", "contentsdto.contentsid": "0000004730", "uploadNum": "0000004730", "existeflg": "false", Compress: neaT, nape,//////la imagen, no lo compress. Tritado: Verdadero, // SHASH Processing Quunksize: 5 * 1024 * 1024, // 5m por corte de corte: falso, // Si falla, no pruebe los subprocesos: 1, // cargar el número concurrente. Número máximo de procesos de carga permitidos al mismo tiempo. // RuntimeOrder: 'Flash', // Deshabilite la función de arrastre global. Esto no aparecerá cuando la imagen se arrastre a la página, abra la imagen. Disableglobaldnd: true}); // Cuando se agrega un archivo, uploader.on ("fileQueue", function (file) {console.log ("filequeueed:"); $ list.append ("<div id = '" + file.id + "' class = 'item'>" + "<h4 class = 'info'>" + file.name + "</h4>" + "<p class = 'state'> esperando a upar ... +"</div>");}); // Cuando todos los archivos están cargados, uploader.on ("uploadFinished", function () {console.log ("uploadFinished:");}) // Cuando un archivo se carga a la respuesta del servidor, este evento se enviará para preguntar si la respuesta del servidor es válida. uploader.on ("uploadaccept", function (object, ret) {// El servidor respondió //ret._raw es similar a dataVar data = json.parse (ret._raw); if (data.resultcode! = "1" && data.resultcode! = "3") {if (data.ResultCode ==== "9") {uploader.reset (); alert ("error"); return false;}}} else {// e05017uploader.reset (); alert ("error"); return false;}}) // gratis cuando la carga de archivo es exitosa. uploader.on ("uploadSuccess", function (file) {$ ("#"+file.id) .find ("p.state"). text ("cargado");}); uploader.on ("uploadError", function (file) {$ ("#"+File.id) .find ("p.state"). Text ("Uploadererloader error");uploader.cancelFile(file);uploader.removeFile(file,true);uploader.reset();});$("#upload").on("click", function() {uploader.upload();})});/******************************************************WebUpload Single file upload end*********************************************//************************************************WebUpload Multi-file upload begin******************************************************//$(function(){var $list = $ ("#thelist1"); var filesize = 0; archivo ', nombre: "multifile"}, swf:' ../../main/js/uploader.swf ', servidor: "ContentsDetail! MultiUpload.action", duplicado: true, // es el mismo cambio de tamaño: falso, formdata: {"status": "multi", "contentsdto.contentsid": "0000004730", "uploadNum": "000000004730", "existfflg": 'falso'}, compress: null, // la imagen no está casada: verdadero, // shash chunksize: 5 * 1024 * 1024, // 5mchunkrell falla, no vuelva a intentar los subprocesos: 1, // Cargue el número concurrente. El número máximo de procesos de carga permitidos al mismo tiempo. // FileNumlimit: 50, // Verifique el número total de archivos. Si lo supera, no se le permitirá unirse a la cola.// RuntimeOrder: 'Flash', // Deshabilite la función Global Arrast y Drop. De esta manera, cuando la imagen se arrastra a la página, abra la imagen. Disableglobaldnd: true}); // Cuando se agrega un archivo, uploader.on ("fileQueue", function (file) {console.log ("filequeueD:"); $ list.append ("<div id = '" + file.id + "' class = 'item'>" + "<h4 class = 'info'>" + file.name + "</h4>" + "<p class = 'state'> espera para upar ... +"</div>");}); // Cuando se inicia el cargador, uploader.on ("startUpload", function () {console.log ("startUpload"); // Agregar parámetros de formulario adicionales $ .extend (true, uploader.options.formdata, {"filesize": filesize, "multifileName": filename.Join (","), "filesizeBeyon": filesizeebebyon.join (",")}); uploader.on ("uploadaccept", function (object, ret) {// El servidor respondió //ret._raw es similar a dataConsole.log ("uploadaccept"); console.log (ret); var data = json.parse (ret._raw); if (data.Resultcode! = "1" && data.resultcode! = "3") == "9") {alerta ("error"); uploader.reset (); return;}} else {uploader.reset (); alert ("error");}}) uploader.on ("uploadSuccess", function (archivo) {$ ("#"+archivo) .find ("p.state"). Text (uploaded ");});}); "uploadError", function (archivo, razon) {$ ("#"+file.id) .find ("p.state"). Text ("uploadErRor"); console.log (file); console.log (razon); // múltiples archivos var filearray = uploader.getFiles (); para (var i = 0 ; i <fileArray.length; i ++) {ifoader.cancEffile (fileArray [i]); uploader.removeFile (fileArray [i], true);} uploader.reset (); filesize = 0; fileName = []; filesizeBeyeNe = [];}); // Cuando validue uploader.on ("error", function () {console.log ("error"); uploader.reset (); filesize = 0; fileName = []; filesizeBeyOne = []; alert ("error");}) // Si es el botón de carga en el cuadro modal, el control no se activará cuando el archivo/el archivo se lanza el archivo/el archivo interno del archivo interno del archivo $ ("#multi .webuploader-pick"). Click (function () {uploader.reset (); filesize = 0; filename = []; filesizeebebyone = []; $ ("#multi: file"). Click (); // clave});*/// abre la carga después de seleccionar el archivo $ (documento) .on ("cambio" "Nombre de la tecla ' function () {var fileArray1 = uploader.getFiles (); for (var i = 0; i <fileArray1.length; i ++) {// usa archivosizeize += fileArray1 [i] .size; filesizeBeyOn.push (fileArray1 [i] .size); filename.push (fileArray1 [i] .name);} console.log (filesize); console.log (filesize); console.log (filesizeBeyOne); console.log (filename);}/*** múltiple cargue*/$ ("input [name = 'multiupload']"). on ("hacer clic", function () {ifoader.upload ();})});/********************************************************** End ************************************************** // **********************************************************************************************************************e. Parámetros LastModifiedDate = [miércoles 27 de abril de 2016 16:45:01 GMT+0800 (Tiempo estándar de China)], Chunks = [3], Chunk = [0], Type = [audio/wav], uid = [yangl], id = [wu_file_0], size = [268620636], nombre = [3.Wav], //////forma contentsdto.contentsid = [000000004730], existfflg = [falso], status = [archivo], uploadnum = [000000004730]} ******************************************************************************************************************************************************************************************************************A.6.ContentsDetail.Accion
// Single File Superte Código de fondo public void AjaxattActAcload () {String path = "d: // test //"+fileFileName; intente {archivo file = this.getFile (); fileUtil.randomAccessFile (path, archivo); // si el archivo es pequeño y 5m, el valor del parámetro de shard es es nullif (stringUtils.isEmpty (chunk)) {outjson ("0", "éxito", ");} else {// Índice de fragmentos de fragmento, el subíndice comienza desde 0 // fragmentos de fragmentos totales if (integer.valueOf (chunk) == (integer.ValueOf (beque) - 1)) "");} else {outjson ("2", "cargar" + fileFileName + "fragmento:" + fragmento, "");}}} capt (excepción e) {outJson ("3", "falló", "");}}}}}Fileutil.java
/*** Especifique la ubicación para comenzar a escribir el archivo* @param tempfile File de entrada* @param ruta de salida a la salida del archivo de salida (ruta + nombre del archivo)* @throws ioexception*/public static void randomAtAssFile (string sTOPATH, archivo tempfile) tira ioexception {randomAccessfile rafile = neweReDinputStream = temper = cylex = nlex = trey {niexin. Archivo (EutPath); // Abra el archivo de destino en leer y escribir rafile = new RandomAccessFile (dirfile, "rw"); rafile.seek (rafile.length ()); inputStream = new BufferedInputStream (new FileInputStream (tempfile)); byte [] buf = new byte [1024]; int long = 0; while (longitud = inputStream.read (buf))! = -1) {rafile.write (bUf, 0, longitud);}} Catch (excepción (buf))! = -1) IoException (e.getMessage ());} finalmente {try {if (inputStream! = Null) {inputStream.close ();} if (rafile! = Null) {rafile.close ();}} catch (excepción e) {tirar nueva iOexception (E.getMessage ();}}} 7. Imagen de efecto
Lo anterior es el conocimiento relevante del método para cargar archivos grandes, archivos únicos y múltiples archivos en Java introducidos por el editor. Espero que sea útil para todos. Si tiene alguna pregunta, déjame un mensaje y el editor responderá a todos a tiempo. ¡Muchas gracias por su apoyo al sitio web de Wulin.com!