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

时间:2013-11-15 18:18:10

标签: javascript php jquery ajax

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

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

但仍然没有运气。我怎么能这样做?

1 个答案:

答案 0 :(得分:1)

尝试修复代码......

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