如何在ajax调用后刷新图像而不重新加载页面?

Question

>我下面有一个脚本，可以将图像上传到服务器。完成后，它通过 html 更新 img 源。我遇到的问题是，我编写了 php 代码，以便在上传文件时将文件重命名为预定义的名称(ext-pix0.png、ext-pix1.png、ext-pix3.png 等(。因此，即使上传完成后新图像替换了旧图像，屏幕上的图片也不会刷新。我也关闭了没有缓存，但它不起作用。如何解决此问题？

脚本

<script>
$('input[name="ext_pix[]"]').on('change',function(){
var account_list = $('#account_list').val();
var order_list = $('#order_list').val();
var id_list = $('#id_list').val();
var formData = new FormData($(this).parents('form')[0]);
$.ajax({
url: 'sql/ext-pix-upload.php',
type: 'POST',
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
success:function(data){
$('#ext-pix0').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix0.png" height="103.5%" width="100%"/>').fadeIn(500);
$('#ext-pix1').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix1.png" height="103.5%" width="100%"/>').fadeIn(500);
$('#ext-pix2').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix2.png" height="103.5%" width="100%"/>').fadeIn(500);
$('#ext-pix3').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix3.png" height="103.5%" width="100%"/>').fadeIn(500);
},
error: function(data){
}
});
});
</script>

.HTML

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="0"/>
<form>
<div class="card-wrapper">
<div class="card mt-3">
<h5 class="card-header pb-2">Exterior Pictures</h5>
<div class="card-block" style="height:322px">
<div style="height:50%">
<div id="ext-pix0" class="ext-pix">
<img src="images/profile/property-pix.png" height="103.5%" width="100%"/>
</div>
<div id="ext-pix1" class="ext-pix">
<img src="images/profile/property-pix.png" height="103.5%" width="100%"/>
</div>
</div>
<div class="lower-row">
<div id="ext-pix2" class="ext-pix">
<img src="images/profile/property-pix.png" height="103%" width="100%"/>
</div>
<div id="ext-pix3" class="ext-pix">
<img src="images/profile/property-pix.png" height="103%" width="100%"/>
</div>
</div>
<div class="ext-btn">
<input id="ext_pix" class="hidden" name="ext_pix[]" type="file" accept="image/*" multiple/>
<label class="gi gi-camera mb-0 text-white" for="ext_pix" title="Change Picture"></label>
</div>
</div>
</div>
</div>
</form>

Answer 1

先清除图像？

success:function(data){
$('#ext-pix0').html('');
$('#ext-pix1').html('');
$('#ext-pix2').html('');
$('#ext-pix3').html('');
$('#ext-pix0').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix0.png" height="103.5%" width="100%"/>').fadeIn(500);
$('#ext-pix1').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix1.png" height="103.5%" width="100%"/>').fadeIn(500);
$('#ext-pix2').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix2.png" height="103.5%" width="100%"/>').fadeIn(500);
$('#ext-pix3').html('<img src="accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix3.png" height="103.5%" width="100%"/>').fadeIn(500);
},

Answer 2

你为什么不尝试在 ajax 的 onSuccess(( 中用 id 更新 html 文件中的 img 元素。

<img id="img_id" src="#"/>

Ajax的成功函数，

success: function (data) {  
$("#img_id").attr("src", data.pictureUrl);    
}

Answer 3

尝试如下：

success:function(data){
$('#ext-pix0').fadeOut('500', function(){
$(this).find("img").attr("src", "accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix0.png");
$(this).fadeIn(500);
});
$('#ext-pix1').fadeOut('500', function(){
$(this).find("img").attr("src", "accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix1.png");
$(this).fadeIn(500);
});
$('#ext-pix2').fadeOut('500', function(){
$(this).find("img").attr("src", "accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix2.png");
$(this).fadeIn(500);
});
$('#ext-pix3').fadeOut('500', function(){
$(this).find("img").attr("src", "accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix3.png");
$(this).fadeIn(500);
});
},

Answer 4

请在成功函数中更新您在数据中获得的响应，并仅在 ajax 成功中更新 src 元素。或者改为将一些类或 ID 分配给 img 标记并仅更新 src 元素。

<img class="ext-pix0" id="ext-pix0" src="images/profile/property-pix.png" height="103.5%" width="100%"/>

更新的脚本

success:function(data)
{
for(vari=0;i<data.length.i++)
{
$('#ext-pix'+i).attr(src,'data[i].url').fadeIn(500);
} 
},

Answer 5

在调用 AJAX 之前淡出"$('#ext-pix...'(">

success:function(data){
for(i=0;i<=3;i++){
$('#ext-pix'+i).html('');
let Image = $('<img/>',{src:'accounts/'+account_list+'/'+order_list+'/pix/'+id_list+'/ext-pix'+i+'.png' , style:'height:103.5%;width:100%';});
$('#ext-pix'+i).html(Image).fadeIn(500);         
}
},