A idéia é trocar imagem, depois de update.
Eu tenho o seguinte de código:
<div id="context1" data-toggle="context" data-target="#context-menu1">
<img id="SizeImage1" src="@Url.Action("StreamImage1", "Account", new { id = Model.Id })" style="cursor:pointer" />
</div>
Script completo:
<script>
$(document).ready(function () {
$("#submit_button").click(function () {
//mostra loading gif
$('#loading1').show();
//desabilita o botão
document.getElementById("submit_button").disabled = true;
var formData = new FormData();
debugger;
var images = $("#Image1")[0].files;
for (var i = 0; i < images.length; i++)
{
if(i == 0)
{
formData.append("Image1", images[i]);
}
else if(i == 1)
{
formData.append("Image2", images[i]);
}
else if(i == 2)
{
formData.append("Image3",images[i]);
}
else if(i == 3)
{
formData.append("Image4",images[i]);
}
}
$.ajax({
cache: false,
type: "POST",
url: '/Account/Upload',
data: formData,
dataType: 'json',
contentType: false,
processData: false,
success: function (response) {
if (response.Success)
{
debugger;
//Oculta loading gif
$('#loading1').hide();
$("#SizeImage1").attr("src","@Url.Action("StreamImage1", "Account", new { id = Model.Id })");
}
if (response.ErrorImage)
{
alert("Erro de imagem");
}
},
error: function (request, status, error)
{
alert('A chamada para o servidor não está funcionando.')
}
});
});
});
function ApagarImagem1(){
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, delete it!",
closeOnConfirm: false
},
function(){
$.ajax({
url: '/Account/Apagar_Imagem1',
type: 'POST',
data: { imagem :"Imagem1" },
success: function (response) {
if (response.Success)
{
$("#SizeImage1").removeAttr("src");
swal("Deleted!", "Your imaginary file has been deleted.", "success");
}
if(response.Error)
{
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
}
});
});
}
</script>
Antes de fazer update de uma nova imagem, ele apaga uma imagem do banco de dados e depois apaga src
com código JS removeAttr
:
function ApagarImagem1(){
$.ajax({
url: '/Account/Apagar_Imagem1',
type: 'POST',
data: { imagem :"Imagem1" },
success: function (response) {
if (response.Success)
{
$("#SizeImage1").removeAttr("src");
}
}
});
}
Resultado de HTML:
<img id="SizeImage1" style="cursor:pointer">
Com return "true" de AJAX, eu uso JS para adicionar a imagem.
$.ajax({
type: "POST",
url: '/Account/Upload',
data: formData,
dataType: 'json',
cache: false,
contentType: false,
processData: false,
success: function (response) {
if (response.Success)
{
$("#SizeImage1").attr("src","@Url.Action("StreamImage1", "Account", new { id= Model.Id})");
}
}
});
Até agora funciona normal, quando eu faço na terceira vez de "trocar imagem", a imagem continua a mesma. Porque não está passando no "Controller" para pegar a imagem do banco de dados.
Código no Controller:
public ActionResult StreamImage1(int id) // Na terceira vez não entra aqui
{
//... Aqui onde pega a imagem no banco de dados
}
O problema é esse código abaixo:
$("#SizeImage1").attr("src","@Url.Action("StreamImage1", "Account", new { id = Model.Id})");
Esse código acima, não está fazendo ele passar na ação "StreamImage1" na terceira vez.
Porque na terceira vez não funciona ? Alguma solução ?