primeiro passo, para se enviar um arquivo via ajax, você precisa desativar o comportamento padrão do jQuery (application/x-www-form-urlencoded
) e usar o padrão da Web (multipart/form-data
).
$.ajax({
url: form.action,
data: data,
contentType: false, // evitar que o jQuery realize o set do 'content-type' para 'application/x-www-form-urlencoded'.
processData: false, // evitar que o jQuery tente serialzar o conteudo usando o $.params().
type: form.method,
success: function(data){
console.log(data);
}
});
agora vamos aos formulario.:
var form = $("#formUpload")[0];
var enviar = $("#Enviar");
enviar.on("click", function (event) {
var data = new FormData(form);
$.ajax({
url: form.action,
data: data,
contentType: false,
processData: false,
type: form.method,
success: function(data){
console.log(data);
}
});
return false;
});
<form id="formUpload">
<div>
<label>
Descrição:
<input type="text" id="Descricao" name="Descricao" value="" />
</label>
</div>
<div>
<label>
Arquivo
<input type="file" id="Arquivo" name="Arquivo" value="" />
</label>
</div>
<div>
<input type="submit" id="Enviar" name="Enviar" value="Enviar" />
</div>
</form>
agora caso não tenha um form e queira fazer o upload assim que o usuario selecionar um arquivo.:
var arquivo = $("#Arquivo");
arquivo.on("change", function (event) {
if (arquivo[0].files.length == 0)
return false;
var data = new FormData();
data.append('Arquivo', arquivo[0].files[0]);
$.ajax({
url: "minha url",
data: data,
contentType: false,
processData: false,
type: "POST",
success: function(data){
console.log(data);
}
});
return false;
});
<input type="file" id="Arquivo" name="Arquivo" value="" />
e por fim, uma informação extra que pode lhe ser util, você pode criar um link para objetos em memoria, então você pode criar um link para a imagem selecionada e já atualizar a sua imagem sem fazer uma requisição AJAX
.
Esta tecnica pode ser util para que o usuario tenha uma previa da imagem antes de realizar o upload.
var arquivo = $("#arquivo");
var imagem = $("#imagem");
arquivo.on("change", function () {
if (arquivo[0].files.length == 0)
return false;
var file = arquivo[0].files[0];
var url = URL.createObjectURL(file);
imagem.attr("src", url);
imagem.attr("title", file.name);
console.log(arquivo[0].files[0]);
});
#imagem {
width: 480px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="file" id="arquivo" name="arquivo" />
<br />
<img id="imagem" src="#" title="" />