CODEWITHSUNDEEP
javascriptphpjqueryajax
Ramin Omrani
Ramin Omrani

Reputation: 3761

How to load images after image upload via ajax?

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?

Upvotes: 0

Views: 637

Answers (1)

gotofritz
gotofritz

Reputation: 3381

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

Upvotes: 1

Related Questions