The idea is to change image, after update.
I have the following code:
<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>
Full script:
<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>
Before updating a new image, it deletes an image from the database and then deletes src
with% JS% code:
function ApagarImagem1(){
$.ajax({
url: '/Account/Apagar_Imagem1',
type: 'POST',
data: { imagem :"Imagem1" },
success: function (response) {
if (response.Success)
{
$("#SizeImage1").removeAttr("src");
}
}
});
}
HTML result:
<img id="SizeImage1" style="cursor:pointer">
With "true" return of AJAX, I use JS to add the image.
$.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})");
}
}
});
So far it works normal, when I do the third time to "swap image", the image remains the same. Because it is not passing in the "Controller" to get the image of the database.
Code no Controller:
public ActionResult StreamImage1(int id) // Na terceira vez não entra aqui
{
//... Aqui onde pega a imagem no banco de dados
}
The problem is this code below:
$("#SizeImage1").attr("src","@Url.Action("StreamImage1", "Account", new { id = Model.Id})");
This code above is not making it pass the "StreamImage1" action the third time.
Why does not the third time work? Any solution?