How to load images after image upload via 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?

Just a nitpick, you should name the first parameter in your success something other than xhr, it isn't an xhr object. — user400654
– user400654, Commented Nov 15, 2013 at 18:18
@1linecode This is the documentation for the XHR object. developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest — user400654
– user400654, Commented Nov 15, 2013 at 18:21
jQuery has no $("#status").appendChild method, it's $("#status").append — user400654
– user400654, Commented Nov 15, 2013 at 18:22

gotofritz · Accepted Answer · 2013-11-15 18:31:39Z

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

edited Nov 15, 2013 at 18:31

answered Nov 15, 2013 at 18:24

gotofritz

3,3912 gold badges33 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

gotofritz Over a year ago

just made a change... try again

Collectives™ on Stack Overflow

How to load images after image upload via ajax?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related