Como realizar upload de arquivo com ajax?
20/11/2014
0
Boa noite preciso enviar formulário com ajax e nele contém arquivo, segue abaixo o exemplo que estou fazendo:
function insertData() {
var file = document.getElementById('file'), formData = new FormData();
formData.append('file', file.files[0]);
var result = document.getElementById("result");
var XMLHttp = new XMLHttpRequest();
XMLHttp.open("post", '/teste/testes', true);
XMLHttp.setRequestHeader("Content-Type", "multipart/form-data");
XMLHttp.onreadystatechange = stateChanged;
function stateChanged() {
if (XMLHttp.readyState == 4 && XMLHttp.status == 200)
result.innerHTML = XMLHttp.responseText;
else
result.innerHTML = "Um erro ocorreu: " + XMLHttp.statusText;
}
;
XMLHttp.send(formData);
}
<form id="formularioBanner" method="post" enctype="multipart/form-data">
<p>
<label>
<span>Titulo:</span>
<input type="text" name="titulo" value="" />
</label>
<label>
<span>Foto:</span>
<input type="file" id="file" name="file" />
</label>
</p>
<input type="button" name="btEnviar" id="btEnviar" value="Enviar" onclick="insertData()" />
</form>
<div id="result"></div>
function insertData() {
var file = document.getElementById('file'), formData = new FormData();
formData.append('file', file.files[0]);
var result = document.getElementById("result");
var XMLHttp = new XMLHttpRequest();
XMLHttp.open("post", '/teste/testes', true);
XMLHttp.setRequestHeader("Content-Type", "multipart/form-data");
XMLHttp.onreadystatechange = stateChanged;
function stateChanged() {
if (XMLHttp.readyState == 4 && XMLHttp.status == 200)
result.innerHTML = XMLHttp.responseText;
else
result.innerHTML = "Um erro ocorreu: " + XMLHttp.statusText;
}
;
XMLHttp.send(formData);
}
<form id="formularioBanner" method="post" enctype="multipart/form-data">
<p>
<label>
<span>Titulo:</span>
<input type="text" name="titulo" value="" />
</label>
<label>
<span>Foto:</span>
<input type="file" id="file" name="file" />
</label>
</p>
<input type="button" name="btEnviar" id="btEnviar" value="Enviar" onclick="insertData()" />
</form>
<div id="result"></div>
Adriano Aguiar
Curtir tópico
+ 0
Responder
Posts
20/11/2014
William
Bom Adriano, como tudo na WEB está evoluindo a arquitetura AJAX também está nesse nível srsrsrr
Em um futuro bem próximo acredito que a maioria dos browsers vai suportar upload de arquivos com AJAX nativamente como mostra esse site http://blog.teamtreehouse.com/uploading-files-ajax.
Mas enquanto isso não acontece você pode usar um plugin jQuery para sua necessidade, nesse link mostra como http://www.rafaelwendel.com/2012/08/upload-de-arquivos-com-jquery-e-barra-de-progresso/.
Em um futuro bem próximo acredito que a maioria dos browsers vai suportar upload de arquivos com AJAX nativamente como mostra esse site http://blog.teamtreehouse.com/uploading-files-ajax.
Mas enquanto isso não acontece você pode usar um plugin jQuery para sua necessidade, nesse link mostra como http://www.rafaelwendel.com/2012/08/upload-de-arquivos-com-jquery-e-barra-de-progresso/.
Responder
Clique aqui para fazer login e interagir na Comunidade :)