如何通过ajax上传图片后加载图片？

Question

I've uploaded some photos via ajax. then the response is the json encoded image names. I want to view images imminently after upload proccess.I've tried this:

JS:EDITED

$('#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();
        }
    });

but still no luck. How can I do this?

Answer 1

trying to fix the code...

I assume ajaxForm is some sort of plugin, and xhr works as you think it does

No need for two loops, and no need for an intermediate array, you can create image nodes directly.

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();
    }
});