5

Gostaria de criar um botão que faça surgir um input para envio de imagens.

Esse botão pode ser usado várias vezes. Quando o(a) usuário(a) clicar no botão de submit, essas imagens devem ser enviadas ao servidor sem recarregar a página.

Eu quero que o usuário clique em adicionar campo, então apareceria um input HTML para imagens. Quando ele colocasse todas as imagens, e o botão de submit enviaria essas imagens para a servlet, atualizando as informaçoes na tela, sem redirecionar a página.

Tentei usar

<jsp:setProperty property="currentImages" name="message" value="${paramValues.campo}" /> 

e o action do submit voltando pra página, mas esse valor sempre fica salvo. Vi pela internet que dá pra fazer com AJAX, mas até agora não consegui pegar esse vetor e passar para servlet.

Como poderia fazer isso?

0

1 Resposta 1

4

Implementação manual

Você pode adicionar vários botões de upload na página adicionando elementos em uma div container. Exemplo:

$('#container').append('<input type="file" />');

Depois na hora de enviar você coloca tudo num objeto do tipo FormData. Exemplo:

var formData = new FormData();
formData.append('imagem', file, file.name);

Finalmente envia tudo via AJAX usando XMLHttpRequest. Exemplo:

var xhr = new XMLHttpRequest();
...
xhr.send(formData);

Veja um exemplo completo:

$('#adicionar').on('click', function() {
  $('#container').append('<input type="file" />');
});

$('#enviar').on('click', function() {
  var formData = new FormData();
  $('#container input').each(function() {
    formData.append('imagens[]', this, this.name);
  });
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/uploadServlet', true);
  xhr.onload = function() {
    if (xhr.status === 200) {
      alert('Sucesso!');
    } else {
      alert('Erro!');
    }
  };
  xhr.send(formData);
});
input {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="adicionar">+</button> <button id="enviar">enviar</button>
<div id="container"></div>

Usando um plugin

O código acima é bem simples e funciona nos navegadores mais modernos.

Porém, se você quer evitar de entrar em muitos detalhes de implementação que isso poderia acarretar num sistema de verdade que vão desde a formatação até o suporte a navegadores mais antigos, sugiro usar um plugin para isto.

Um plugin que já usei com sucesso no passado foi o Blueimp jQuery File Upload.

Você pode encontrar vários exemplos na documentação, embora na prática isso possa até atrapalhar um pouco porque tem tantas formas de usar que você acaba gastando um bom tempo aprendendo sobre o plugin.

No entanto, um uso bem simples pode ser algo como isto:

$('#fileupload').fileupload({
    dataType: 'json',
    add: function (e, data) {
        data.context = $('<button/>').text('Upload')
            .appendTo(document.body)
            .click(function () {
                data.context = $('<p/>').text('Uploading...').replaceAll($(this));
                data.submit();
            });
    },
    done: function (e, data) {
        data.context.text('Upload finished.');
    }
});

Servlet

Para receber o upload no seu servlet, sugiro usar a biblioteca Apache Commmons FileUpload.

Entenda que, do ponto de vista do servidor, uploads são complexos de gerenciar. A documentação da biblioteca dá inúmeros exemplos de controle que você pode ter.

Um caso mais simples seria assim:

DiskFileItemFactory factory = new DiskFileItemFactory();
ServletFileUpload upload = new ServletFileUpload(factory);
List<FileItem> items = upload.parseRequest(request);
for (FileItem item : itens) {
    if (!item.isFormField()) {
        String fileName = item.getName();
        String contentType = item.getContentType();
        File uploadedFile = new File(...);
        item.write(uploadedFile);
    } else {
        //campos normais
        String campo = item.getFieldName();
        String valor = item.getString();
    }
}

Note que você não pode acessar os demais campos usando request.getParameter() e métodos correlatos, pois o corpo de uma requisição onde ocorrem uploads é diferentes e o servidor não vai decodificar os campos da mesma forma que numa requisição normal.

Portanto, como no exemplo acima, você deve verificar os demais campos da requisição na mesma lista de itens onde ficam os arquivos. Quando for um campo normal, item.isFormField() vai ser verdadeiro.

Para uma descrição mais completa, veja esta resposta do SO (em Inglês).

4
  • Entendi. Funcionou passando os valores para a servlet via submit. Mas ainda nao conseguir passar os valores com o script que voce passou. Quando você diz: "O código que eu postei pega todos os inputs dentro do container", seria: <div #container input> <input name="arquivos[]" type=file multiple /> </div> ? @utluiz
    – Thiago R.
    Commented 7/04/2016 às 2:07
  • @ThiagoR. Sim, isso. O script que eu fiz pega qualquer tag <input> (independente do conteúdo) que estiver dentro de um elemento com id="conteiner", neste caso o div. O que não está funcionando? Se você olhar a Ferramenta do Desenvolvedor do seu navegador, você consegue ver a requisição AJAX sendo enviada na aba "Network"/"Rede"? Eu testei esse código no meu Chrome e a requisição é enviada. Se a requisição for feita mas o erro ocorre no servidor, pode ser que esteja faltando algum cabeçalho no AJAX. Você pode então comparar os dados da requisição com Submit da requisição com AJAX.
    – utluiz
    Commented 7/04/2016 às 2:58
  • Se continuar enfrentando problemas, sugiro criar outra pergunta e postar o código que você tem e não funciona. Aqui nos comentários não é um lugar legal para entrar em discussões prolongadas.
    – utluiz
    Commented 7/04/2016 às 2:59
  • O problema é que os valores sempre estão nulos
    – Thiago R.
    Commented 7/04/2016 às 3:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .