如何在通过 ajax 上传图像后加载图像 - How to load images after image upload via ajax?

How to load images after image upload via ajax?

本文关键字：图像加载 ajax | 更新日期: 2023-09-27

我已经通过ajax上传了一些照片。然后响应是 JSON 编码的图像名称。我想在上传过程后立即查看图像。我试过这个：

JS：已编辑

$('#upload-form').ajaxForm({
        success: function(data) {
            $(".loader").hide();
            $("#status").html("");
            $.each(data, function(index, item) {
                $("#status").append("<img src='<?php echo base_url()."assets/img/"; ?>" + item.name +"' />");
            });
            return false;
        },
        complete: function(xhr) {
            $(".loader").hide();
            return false;
        },
        error : function(xhr) {
                $("#status").html(xhr.responseText);
                $(".loader").hide();
        }
    });

但仍然没有运气。我该怎么做？

试图修复代码...

我假设 ajaxForm 是某种插件，xhr 的工作方式与您认为的那样

不需要两个循环，也不需要中间数组，可以直接创建镜像节点。

var baseUrl = "<?php echo base_url(); ?>" + "assets/img/"; 
$('#upload-form').ajaxForm({
    success: function(xhr) {
        $(".loader").hide();
        $("#status").html("");
        var images = "";
        $.each(xhr, function(index, item) {
            images += "<img src='"+ baseUrl + item.name + "' />";
        });
        $("#status").append(images);
        return false;
    },
    complete: function(xhr) {
        $(".loader").hide();
        return false;
    },
    error : function(xhr) {
            $("#status").html(xhr.responseText);
            $(".loader").hide();
    }
});