1. Descrição dos motivos para usar o plug -in do WebUploader
Fui enganado pelo projeto que estou fazendo agora.
Deixe -me falar primeiro sobre a minha arquitetura do projeto Spring+Struts2+mybatis+mysql
Então o que. Foi acordado que seria suficiente para fazer upload de acordo com o 2G, então usei o plug-in AjaxFileUpload. Como usei isso para fazer upload de imagens antes, usei diretamente ao fazer o upload do anexo.
Vários códigos e códigos foram testados. Não há problema em fazer o upload de arquivos 2G. O truque veio. Após o lançamento do projeto, o cliente solicitou a upload de arquivos 4G e havia ainda mais de 20g. . Nani, você não disse isso antes. . .
No IE11, use o plug-in AjaxfileUpload.js para fazer upload de arquivos que excedem o 4G e o IE lança diretamente uma exceção. Uma mensagem com resultado aritmético superior a 32 bits pop -up.
Como mostrado na figura abaixo:
Como uma nota adicional, meu sistema é de 64 bits, 8G, o Google Browser e o IE11 Browser são todos de 32 bits. É um problema fazer o upload de 8G usando o AjaxfileUpload no Google. Nenhum erro será relatado.
O IE11 tem mais de 4G e é errado relatar a imagem acima diretamente. sem chance. Altere o plug-in.
2. Seleção de plug -in
1. Plugin de upload de fluxo. O fluxo é um plug-in para resolver o problema de fazer upload de arquivos por diferentes navegadores. É uma combinação da versão flash do Uploadify e HTML5. Endereço do plug -in http://www.twinkling.cn/
A função é realmente muito poderosa, mas o estilo CSS é fixo, o que é muito diferente do estilo da barra de progresso do meu projeto atual. Desista deste plugin
2. plug -in de WebupLoader. O WebUploader é um componente simples de upload de arquivos modernos, principalmente HTML5 e complementado pelo Flash desenvolvido pela equipe do Baidu Webfe (FEX). Nos navegadores modernos, podemos dar um jogo completo às vantagens do HTML5, sem abandonar os navegadores IE mainstream e continuar a usar o tempo de execução do flash original e somos compatíveis com o IE6+, iOS 6+ e Android 4+. O mesmo método de chamada pode ser selecionado pelos usuários à vontade.
O uso da fragmentação de arquivos grandes, o upload simultâneo, melhora bastante a eficiência do upload de arquivos. Endereço do plug -in http://fex.baidu.com/webuploader/
Este plug -in pode personalizar estilos CSS. As funções também são muito poderosas, então adotei decisivamente esse plug-in.
3. Upload de arquivo único webUploader
Estou usando a versão 0.1.5 do WebUploader. O WebUploader fatia principalmente arquivos grandes no cliente, como o envio de solicitações de sharding a cada 5m e recebendo arquivos do plano de fundo para mesclar arquivos. Existem duas maneiras de mesclar arquivos. O primeiro é passar todos os fragmentos para o fundo e depois mesclá -los. Isso é para garantir que a ordem de sharding esteja correta e a segunda é se fundir durante o sharding. Eu usei o segundo no projeto. O upload de arquivos usando o uploader da Web requer três recursos: JS, CSS e SWF.
1.Introduzir arquivos JS
<script type = "text/javascript" src = "../ main/js/webuploader.js"> </script> <script type = "text/javascript" src = "../ main/js/webuploader.min.js"> </script>
2. Introduzir o estilo CSS
<link href = "../ main/css/webupLoader.css" rel = "STILESHEET" type = "text/css"/>
3. Introduzir SWF . O SWF não se refere diretamente a ele. Basta especificar o caminho do SWF quando o WebUploader for inicializado.
4.Upload3.html
<! xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "Ja" Lang = "Ja"> <Head> <meta http-equiv = "content-type" = "text/html; charset = utf-8"/> <meta "/" /> <meta http-equiv = "content-script-type" content = "text/javascript"/> <meta http-equiv = "content-style-type" content = "text/csS"/> <title> Demo </title> <link rel = "/ main/css/strengss/> /> <link href = "../ main/css/webupLoader.css" rel = "stylesheet" type = "text/css"/> <script type = "text/javascript" src = "../ main/js/jQuery-1.1.1.min.js"> </script> src = "../ main/js/jQuery-2.1.4.minmin.js"> </script> <script type = "text/javascript" src = "../ main/js/jQuery-ui.min.js"> </script> <script = "text/javasscript" 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/javroScript " src = "../ main/js/webupLoader.min.js"> </script> <script type = "text/javascript" src = "../ js/contents/upload3.js"> </script> <body> <d id = "uploader"> <!-usado para armazenar arquivos-> id = "APRECK"> </div> <input type = "button" value = "upload" id = "upload"/> </div> </div> <div id = "uploader1"> <! --- usado para armazenar informações de arquivo-> <div id = "thelist1"> </div> <div> <brotle = "multi"> </div = "thelist1"> </divi> <div> <div = "" MultiRgo "> </Div =" thelist1 "> </div =" ""> </div = "thelist1"> </div> <div> <divid = "multi"> <//" id = "MultIupload"/> </div> </div> </body> </html>
A imagem é relativamente simples, parece isso
5.Upload3.js
Incluindo upload de arquivo único, upload de vários arquivos e várias instâncias de WebPloader
/************************************************************/$ (function () {var $ list = $ ("#thelist"); var uploader; // uploader instantiado = picking automaticamente = {fILET: {iDNEMET: {iDNEMET: {iDNEMET: {iDNEGRATER: {iDNEGROUND: {id {'APRETENO, // APRENDAÇÃO AUTOMATÁTICA: {{) inútil, embora eu tenha sido alterado. // FileVer: 'Multifile', // Personalize o atributo Nome do arquivo. O arquivo não pode ser recuperado ao usar o arquivo // é recomendável que o autor tenha tempo para alterar este local, ele matará pessoas. server: "ContentsDetail!ajaxAttachUpload.action", duplicate:true,//Is the same file resize: false,formData: {"status":"file","contentsDto.contentsId":"0000004730","uploadNum":"0000004730","existFlg":'false'}, compress: null,//Image not compressed CHUNKED: Verdadeiro, // SHASH Processamento ChunkSize: 5 * 1024 * 1024, // 5m por fatia Chunkretry: false, // Se falhar, não tente threads: 1, // upload número simultâneo. Número máximo de processos de upload permitidos ao mesmo tempo. // RUNTimeOrder: 'Flash', // Desative a função de arrasto global. Isso não aparecerá quando a imagem for arrastada para a página, abra a imagem. desabilleglobaldnd: true}); // Quando um arquivo é adicionado, uploader.on ("filequeed", function (file) {console.log ("filequeed:"); $ list.append ("<div id = '" + file.id + "' class = 'item'>" + "<h4 class = 'info" + file.name + "</h4"> " +"</div>");}); // Quando todos os arquivos são carregados, uploader.on ("uploadfinished", function () {console.log ("uploadfinished:");}) // Quando um arquivo é carregado para a resposta do servidor, este evento será enviado para perguntar se a resposta do servidor é válida. uploader.on ("uploadAccept", function (object, ret) {// o servidor respondeu //ret._raw é semelhante aos dados do datavar = json.parse (ret._raw); if (data.resultcode! = "1" && data.resultcode! "9") {uploader.reset (); alert ("error"); retorna false;}} else {// e05017Uploader.Reset (); alert ("erro"); retornar false;}}) // gratuitamente quando o upload do arquivo é bem -sucedido. uploader.on ("uploadSuccess", function (file) {$ ("#"+file.id) .find ("p.state"). text ("upload");}); uploader.on ("uploadError", function (file) {$ "#"+fileer.id) .find ("P. P. error "); uploader.cancelfile (file); uploader.removefile (arquivo, true); uploader.reset ();}); $ ("#upload "). ENERGUEÇÃO ENDEREÇO DE ENIMENTO *********************** $ ("#thelist1"); var fileSize = 0; arquivo ', nome: "multifile"}, swf:' ../../main/js/uploader.swf ', servidor: "contentsDetail! multiupload.action", duplicado: true, // é o mesmo arquivo redimensionado: false, formdata: {"status":"multi","contentsDto.contentsId":"0000004730","uploadNum":"0000004730","existFlg":'false'}, compress: null,//The picture is not compressed chunked: true, //Shash chunkSize: 5 * 1024 * 1024, //5MchunkRetry:false,//If it Falha, não tente novamente threads: 1, // carrega o número simultâneo. O número máximo de processos de upload permitidos ao mesmo tempo. // filenumlimit: 50, // Verifique o número total de arquivos. Se exceder, não poderá entrar na fila.// RUNTimeOrder: 'Flash', // Desativar a função Global Drag and Drop. Dessa forma, quando a imagem é arrastada para a página, abra a imagem. desabilleglobaldnd: true}); // Quando um arquivo é adicionado, uploader.on ("filequeed", function (file) {console.log ("fileQueed:"); $ list.append ("<div id = '" + file.id + "' class = 'item'>" + "<h4 class = 'info" + file.name + "</h4"> " +"</div>");}); // Quando o uploader é iniciado, uploader.on ("startupLoad", function () {console.log ("startupload"); // Adicione parâmetros de formulário adicionais $ .extend (true, uploader.options.formdata, {"FileSee": FileSee, "Multifilename": FileName.Join (","), "FileSeeNeByOne": fileSizeonebyone.join (",")}); uploler.on ("uploadAcept", function (objeto, ret) {// o servidor respondeu //ret._raw é semelhante ao dataconsole.log ("uploadAccept"); console.log (ret); var data = json.parse (ret._raw); if (data.resultcode! = "1" == "9") {alert ("error"); uploler.reset (); return;}} else {uploader.reset (); alert ("error");}}) uploader.on ("uploadsuccess", function (file) {$ ("#"+file.id.id ) .find ("p.state"). text ("upload");}); uploader.on ("uploadError", function (arquivo, raciocínio) {$ ("#"+file.id) .find ("p.state.). = 0; i <FILearray.Length; i ++) {uploader.Cancelfile (FileArray [i]); uploader.RemoveFile (FileArray [i], true);} uploader.Reset (); fIliGet = 0; FileName = []; uploader.on ("error", function () {console.log ("error"); uploader.reset (); filesize = 0; filename = []; filesizeonebyone = []; alert ("erro");}) // se for o botão de upload na caixa modal, o controle não será trigido quando se deslizará quando o botão de upload na caixa modal, o controle, não será tagno; $ ("#multi .WebupLoader-pick"). Clique em (function () {uploader.reset (); filesize = 0; filename = []; filesizeonebyone = []; $ ("#multi: file"). Clique (); // código da tecla}; $ (document) .on ("alteração", "input [name = 'multifile']", function () {var filearray1 = uploler.getfiles (); para (var i = 0; i <filearray1.length; i ++) {// use fileSizee += FileArray1 [i] .Size; filesizeoneByone.push (FileArray1 [i] .size); FileName.push (FileArray1 [i] .Name);} console.log (filesize); console.log (filesize); console.log (filesizenone); console.og.og (filenize); upload*/$ ("input [name = 'multiupload']").) final ***************************************** parameters lastModifiedDate=[Wed Apr 27 2016 16:45:01 GMT+0800 (China Standard Time)], chunks=[3], chunk=[0], type=[audio/wav], uid=[yangl], id=[WU_FILE_0], size=[268620636], name=[3.wav], //formData parameters contentsdto.contentsid = [0000004730], existflg = [false], status = [arquivo], uploadnum = [0000004730]} *********************************6.ContentsDetail.Action
// Código de fundo do upload de arquivo único public void ajaxattachupLoad () {string path = "d: // test //"+filefileName; tente {file file = this.getfile (); fileutil.randomaccessfile (caminho, arquivo); se o arquivo é pequeno e 5m, o valor do parâmetro do shard é nullif (stringutils.isempty (chunk)) {outjson ("0", "sucessor", "");} else {// Índice de Shard de Chunk, o subscrito começa a partir de 0 // pedaços totais de shard count if (integer.valueof (chunk) == (integger.valueof (chunks) - 1)) { else {outjson ("2", "Upload" + fileFileName + "chunk:" + chunk ",");}}} catch (exceção e) {outjson ("3", "upload falhou", "");}}Fileutil.java
/*** Especifique o local para começar a gravar o arquivo* @param tempfile input Argh* @param Outpath Path para o arquivo de saída (caminho + nome do arquivo)* @throws ioexception*/public static void aleatomAccessfile (string outpath, file tempfile) lança ioexception {RandomAccessfile Rafile; Arquivo (outpath); // Abra o arquivo de destino em leitura e gravação rafile = new RandomAccessFile (Dirfile, "RW"); rafile.seek (rafile.length ()); inputStream = new bufferInputStream (new FileInputStream (tempfile)); byte [] buf = new byte [1024]; int length = 0; Ioexception (e.getMessage ());} finalmente {tente {if (inputStream! = Null) {inputStream.close ();} if (rafile! = Null) {rafile.close ();}} catch (exceção e) {throw ioException (e.getMessage (); 7. imagem de efeito
O exposto acima é o conhecimento relevante do método de fazer upload de arquivos grandes, arquivos únicos e vários arquivos no Java introduzido pelo editor. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!