Estou tentando fazer o upload de um arquivo com o seguintes códigos:
JSP:
<form id="form_upload" enctype="multipart/form-data">
<ul class="form_fields_container">
<li><label>Imagem:</label>
<div class="form_input">
<input type="file" class="btn required" id="imagemUpload" name="imagem" />
</div>
<a href="#" onclick="$(this).closest('form').submit()" class="button_small bluishBtn fl_right"><span class="iconsweet">=</span>Gravar</a>
</li>
</ul>
</form>
.....
$("#form_upload").submit(function(event) {
var data = new FormData();
data.append('imagem', document.getElementById('imagemUpload'));
$.ajax({
type: "POST",
processData: false,
contentType: false,
url: "/minha/url",
data: data,
success: function(jsonResposta) {
$.notify(jsonResposta.dsData, jsonResposta.tpMensagem);
if(jsonResposta.tpMensagem == 'success') {
alert('Fez upload! ' + jsonResposta.dsFuncionalidades);
} else {
alert('Alguma coisa nao deu certo!');
}
}
});
return false;
});
e na classe Controller:
@Post("/minha/url")
public void upload(final UploadedFile imagem) throws Exception {
MensagemAjax ajax = new MensagemAjax();
try {
System.out.println(imagem.getContentType());
// String nomeArquivo = "testeImagem";
// imagens.salvarImagemDiretorio(imagem, nomeArquivo);
ajax.setMensagemSucesso("Imagem incluida com sucesso");
} catch (Exception e) {
ajax.setMensagemErro("A imagem não pode ser salva ou o arquivo não é valido");
}
result2.use(json()).withoutRoot().from(ajax).serialize();
}
A minha requisição chega na classe controller, mas o parâmetro ‘imagem’ vem sempre nulo. Imagino eu que a utilização da classe br.com.caelum.vraptor.interceptor.multipart.UploadedFile seja indevida para esse caso. Devo usar outra classe do VRaptor? Obter o arquivo do Request?
Agradeço desde já.
Isso que você está fazendo não funciona mesmo. Por isso nem chega a imagem no vraptor. Você não consegue fazer upload de arquivo apenas com $.ajax do jquery
vc pode fazer direto no submit do form, mas se não dá pra fazer dessa forma. há plugins que te ajudam como o uploadify ou o usando o Jquery File Upload
tem um exemplo nesse blog: http://kadulino.wordpress.com/2012/10/23/barra-de-progresso-no-upload-de-arquivos-progress-bar/
[quote=Felipe Pinto da Silva]Estou tentando fazer o upload de um arquivo com o seguintes códigos:
JSP:
<form id="form_upload" enctype="multipart/form-data">
<ul class="form_fields_container">
<li><label>Imagem:</label>
<div class="form_input">
<input type="file" class="btn required" id="imagemUpload" name="imagem" />
</div>
<a href="#" onclick="$(this).closest('form').submit()" class="button_small bluishBtn fl_right"><span class="iconsweet">=</span>Gravar</a>
</li>
</ul>
</form>
.....
$("#form_upload").submit(function(event) {
var data = new FormData();
data.append('imagem', document.getElementById('imagemUpload'));
$.ajax({
type: "POST",
processData: false,
contentType: false,
url: "/minha/url",
data: data,
success: function(jsonResposta) {
$.notify(jsonResposta.dsData, jsonResposta.tpMensagem);
if(jsonResposta.tpMensagem == 'success') {
alert('Fez upload! ' + jsonResposta.dsFuncionalidades);
} else {
alert('Alguma coisa nao deu certo!');
}
}
});
return false;
});
e na classe Controller:
@Post("/minha/url")
public void upload(final UploadedFile imagem) throws Exception {
MensagemAjax ajax = new MensagemAjax();
try {
System.out.println(imagem.getContentType());
// String nomeArquivo = "testeImagem";
// imagens.salvarImagemDiretorio(imagem, nomeArquivo);
ajax.setMensagemSucesso("Imagem incluida com sucesso");
} catch (Exception e) {
ajax.setMensagemErro("A imagem não pode ser salva ou o arquivo não é valido");
}
result2.use(json()).withoutRoot().from(ajax).serialize();
}
A minha requisição chega na classe controller, mas o parâmetro ‘imagem’ vem sempre nulo. Imagino eu que a utilização da classe br.com.caelum.vraptor.interceptor.multipart.UploadedFile seja indevida para esse caso. Devo usar outra classe do VRaptor? Obter o arquivo do Request?
Agradeço desde já.[/quote]
Acho que a primeira coisa a verificar é se o VRaptor está configurado para tratar o upload de arquivos, no caso, isso é feito através da adição da dependencia do commons-fileupload.
Segunda, o upload diretamente com ajax, não ira funcionar sem o submit do form, nao tem como. A nao ser o uso de algum plugin adicional que faca o trabalho.
Boa noite kadu,
Tentei utilizar o exemplo que você me mandou. E em parte funcionou: o upload do arquivo está funcionando (alterei a assinatura do método para ‘public void upload(Collection files)’), mas a página está sendo submetida. Não quero submit, e quero mostrar uma mensagem depois que terminou o download. O meu código está assim (sem erro de javascript acusado pelo firebug):
<script type="text/javascript" src="<c:url value="/javascripts/jquery-1.7.2.min.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/jquery.ui.widget.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/jquery.fileupload.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/jquery.fileupload-fp.js"/>"></script>
<script type="text/javascript" src="<c:url value="/js/jquery.iframe-transport.js"/>"></script>
..
$(document).ready(function() {
$('#fileupload').fileupload('option', {
url : 'minha/url',
maxFileSize : 5000000,
process : [ {
action : 'load',
maxFileSize : 20000000
}, {
action : 'resize',
maxWidth : 1440,
maxHeight : 900
}, {
action : 'save'
} ]
});
});
..
<form id="fileupload" action="<c:url value="pergunta/uploadImagem"/>" method="POST" enctype="multipart/form-data">
<input id="file" type="file" name="files[]" multiple>
<input type="submit" value="Lalalal" />
</form>
Como faria para que a página não fosse submetida? Alguém poderia me ajudar?
Kadu, em um daqueles arquivos tinha o exemplo com o uploadify e resolvi testar.
Inicialmente o objeto UploadedFile vinha nulo na minha classe controller. Fuçando um pouco na interwebs eu descobri que o Uploadify força que o nome do parâmetro seja ‘Filedata’ então, a parada funfou. Friso que o Uploadify permite que tu possa selecionar vários arquivos, entretanto ele chama o método da classe controle para cada arquivo, por conta disto o método não recebe um Collection.
Sem submit, como se fosse ajax, do jeito que eu queria!! Vou postar aqui o código para que outros possam consultar! renanpto e kadu, obrigado pela resposta!
JSP:
<form>
<div id="queue"></div>
<input id="file_upload" name="file_upload" type="file" multiple="true">
</form>
...
<script type="text/javascript">
$(function() {
$('#file_upload').uploadify({
'swf' : 'uploadify.swf',
'uploader' : 'minha/url',
'onUploadSuccess' : function(file, data, response) {
alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);
}
});
});
</script>
Controller:
@Post("/minha/url")
public void upload(UploadedFile Filedata) {
// my code
}
Para alterar o nome do parâmetro, pode-se fazer isso:
public void upload(@Named("Filedata") UploadedFile umNomeQualquer) {
}
Abraços!