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).