Question

所以我有这个ajax脚本来显示管理员发送给客户端的图像，但是我有一个问题是，每次管理员上传新图像时，脚本都会不断加倍并发送两次图像，例如，如果管理员上传的第一张图像显示了一个图像和管理员添加一个新图像<-，问题开始了，它使正在上传的图像翻了一番（现在它发送了相同的图像两次，依此类推），我该如何解决呢？我不知道我的后端是问题还是ajax脚本，这是我的代码，谢谢。

我的Ajax脚本

$("#btn-file-input").on("click",function(){
    $("#file-input").trigger("click");
    $('#file-input').change(function () {
        var value = $(this).val();
        var form = new FormData();
        var dat = $('#file-input').prop('files')[0];
        console.log(dat)
        form.append("image-user",dat);
        form.append("id_user",id_user);
        for(var q of form.entries()){
            console.log(q[0]+ ', ' + q[1]);
        }
        $.ajax({
            processData: false,
            contentType: false,
            async: false,
            cache: false,
            type: "POST",
            url: "updateimage",
            data: form,
            success: function(result) {
                var result_json = JSON.parse(result)
                console.log(result_json)
            }
        });
    });
});

我的后端

    @csrf_exempt
    def admin_send_image(request):
        data_ajax_r = request.FILES.get('image-user')
        id_user = request.POST.get('id_user')
        user = UserMessage.objects.get(line_id=id_user)
        admin_now = Account.objects.get(id=request.user.id)
        file_storage = FileSystemStorage()
        file_storage.save(data_ajax_r.name,data_ajax_r)
        url_object = file_storage.url(data_ajax_r.name)
        url_to_line ='https://c93c90ff8ee8.ap.ngrok.io'+url_object
        line_bot_api.push_message(user.line_id,[ImageSendMessage(url_to_line,url_to_line)])
        ctx = {"admin_name":admin_now.username,"file_name":url_object,"admin_image":"/media/"+str(admin_now.gambar)}
        return HttpResponse(json.dumps(ctx))

这是我网站上的问题的屏幕截图；

聊天中上传的第一张图片

第二张图片上传并显示问题

Answer 1

您每次单击#btn-file-input时都会添加一个更改事件处理程序。您仅应将此事件处理程序添加一次，除非您出于某些特殊原因将事件处理程序添加到另一个事件处理程序中，否则应将其移到外部。

$("#btn-file-input").on("click",function(){
    $("#file-input").trigger("click");
});
$('#file-input').change(function () {
    var value = $(this).val();
    var form = new FormData();
    var dat = $('#file-input').prop('files')[0];
    console.log(dat)
    form.append("image-user",dat);
    form.append("id_user",id_user);
    for(var q of form.entries()){
        console.log(q[0]+ ', ' + q[1]);
    }
    $.ajax({
        processData: false,
        contentType: false,
        async: false,
        cache: false,
        type: "POST",
        url: "updateimage",
        data: form,
        success: function(result) {
            var result_json = JSON.parse(result)
            console.log(result_json)
        }
    });
});

为什么我的文件输入相乘并发送相同的图像两次？

1 个答案: