Implementando Envio de Arquivos com Parâmetros via ajaxFileUpload

Analisando o problema:

O ajaxFileUpload implementa o upload assíncrono sem recarregar a página criando dinamicamente um iframe, um formulário e adicionando o arquivo para envio. No entanto, a implementação original não processa os parâmetros adicionais. É necessário modificar o código para suportar essa funcionalidade.

A seguir, apresento as três alterações necessárias no arquivo ajaxFileUpload.js:

Primeiro modifique a assinatura do método createUploadForm:


criarFormularioUpload: function(id, elementoArquivoId, dados) {
    // corpo do método permanece o mesmo
}

Antes da linha "jQuery(form).appendTo('body')", adicione o seguinte código:


if (dados) {
    for (var chave in dados) {
        $('<input name="' + chave + '" type="hidden" value="' + dados[chave] + '"></input>').appendTo(formulario);
    }
}

Por fim, atualize a chamada do método para incluir os parâmetros:


var formulario = jQuery.criarFormularioUpload(id, s.elementoArquivoId, s.dados);

Exemplo de utilização:


$.ajaxFileUpload({
    url: 'http://localhost:8080/sistema/upload',
    tipo: 'post',
    dados : {
        endereco : endereco,
        termo : termo,
        regra : regra,
        informacao : informacao,
        assinatura:assinatura
    },
    seguro: false, // geralmente definido como false
    elementoArquivoId: 'arquivo', // ID e name do input de arquivo
    tipoRetorno: 'JSON', // tipo de retorno, geralmente JSON ou APPLICATION/JSON
    sucesso: function(resposta, status){  
        console.log(resposta);
    },
    erro: function(resposta, status, erro){ 
        console.log(erro);
    }
}); 

Código HTML correspondente:


<input id="arquivo" name="arquivo" type="file"></input>

No backend Java, a recepção dos parâmetros não pode ser feita através de request.getParameter(). Existem duas abordagens principais para upload de arquivos:

Primeira abordagem - utilizando Servlet:


FabricaItensArquivo fabrica = new DiskFileItemFactory();
        ServletFileUpload uploadServlet = new ServletFileUpload(fabrica);
        List<fileitem> itensArquivo = uploadServlet.parseRequest(request);
</fileitem>

Segunda abordagme - utilizando Spring MVC:


<bean class="org.springframework.web.multipart.commons.CommonsMultipartResolver" id="multipartResolver">    
          
        <property name="defaultEncoding" value="utf-8"></property>    
          
        <property name="maxUploadSize" value="10485760000"></property>    
          
        <property name="maxInMemorySize" value="40960"></property>    
    </bean>  

Com essa segunda abordagem, é possível obter os parâmetros através de request.getParameter().

Dois pontos importantes a observar:

  1. O tipo de dado (dataType) deve estar em maiúsculas;
  2. Os valores no objeto 'dados' devem seguir formato JSON válido para serem corretamente processados no backend.

Referências:

Tags: javascript ajax upload arquivos ajaxfileupload

Publicado em 5-30 20:30 por Thomas