上传图像ajax复制上传的图像，除非重新加载页面

Question

我遇到了一个奇怪的问题，ajax上传脚本是以模态加载的表单的一部分。以下是行为示例：

上传图像1

• 一切正常

上传图像2

• 不正常。上传图像2和2(重复图像2(

上传图像3

• 不正常。上传图像3、3和3(重复图像3两次(

等等…

这是HTML

<div class="col-md-6">
<div class="form-group">
<span class="input-group-btn">
<span class="btn btn-info" onclick="$(this).parent().find('input[type=file]').click();" id="btn_face">Select Image</span>
<input name="file" id="file" onchange="$(this).parent().parent().find('.form-control').html($(this).val().split(/[\|/]/).pop());" style="display: none;" type="file"></span>
</div>
</div>

这就是脚本

$(document).ready(function(){
$(document).on('change', '#file', function(){
var name = document.getElementById("file").files[0].name;
var form_data = new FormData();
var ext = name.split('.').pop().toLowerCase();
if(jQuery.inArray(ext, ['gif','png','jpg','jpeg']) == -1) 
{
alert("Invalid Image File");
}
var oFReader = new FileReader();
oFReader.readAsDataURL(document.getElementById("file").files[0]);
var f = document.getElementById("file").files[0];
var fsize = f.size||f.fileSize;
if(fsize > 2000000)
{
$("#upload_msg").fadeTo(2000, 500).slideUp(500, function(){
$("#upload_msg").alert('close');
});
$('#upload_msg').html('<div class="alert alert-danger">Image File Size is very big. Max size 1MB</div>');
}
else
{
form_data.append("file", document.getElementById('file').files[0]);
$.ajax({
url:"upload_image.php",
method:"POST",
data: form_data,
contentType: false,
cache: false,
processData: false,
beforeSend:function(){
$('#uploaded_image').html("<label class='text-success'>Image Uploading...</label>");
},   
success:function(data)
{
$('#uploaded_image').html(data);
$("#file").attr("disabled", true);
$('#btn_face').removeClass('btn btn-info').addClass('btn btn-default');
$('#btn_face').html('Image Uploaded');
}
});
}
});
});

我曾尝试在第一次上传后禁用上传按钮，但由于上传本身是以模式打开的，一旦我关闭模式并再次打开，按钮就会变为活动状态。

我还尝试将onclick="javascript:window.location.reload()"分配给模态的关闭按钮，这很好，但如果在此之前的用户确实提交了表单，那么在重新加载时，它会插入MySQL数据库中的最后一条记录。

我试着搜索一些关于类似行为的信息，但没有成功。

感谢您的帮助。

Answer 1

解决方案

感谢穆罕默德·穆拉德·海德尔。

在Ajax调用中设置async:false，并在成功后清除文件输入，这就成功了。

这是更新的代码

$.ajax({
async:false,
url:"upload_image.php",
method:"POST",
data: form_data,
contentType: false,
cache: false,
processData: false,
beforeSend:function(){
$('#uploaded_image').html("<label class='text-success'>Image Uploading...</label>");
},   
success:function(data)
{
$("#file").val('');
$('#uploaded_image').html(data);
$("#file").attr("disabled", true);
$('#btn_face').removeClass('btn btn-info').addClass('btn btn-default');
$('#btn_face').html('Image Uploaded');
}
});