show uploaded image on webpage by ajax php

Question

I am creating a webpage to upload image. It is working fine at the moment. I means image can upload on server.

Problem is i want to show uploaded image on webpage. Below are the Ajax code.

$(function () {
$("#progress").hide();
    'use strict';
    var url = 'emp_upload_file.php';
    $('#fileuploader').fileupload({
        add: function(e, data) {
                var uploadErrors = [];
                var acceptFileTypes = /^image\/(jpe?g|png)$/i;
                if(data.originalFiles[0]['type'].length && !acceptFileTypes.test(data.originalFiles[0]['type'])) {
                    uploadErrors.push('Please choose jpg or png file. ');
                }
                if(data.originalFiles[0]['size'].length && data.originalFiles[0]['size'] > 500000) {
                    uploadErrors.push('Filesize is too big. ');
                }
                if(uploadErrors.length > 0) {
                    alert(uploadErrors.join("\n"));
                } else {
                    data.submit();
                }
        },
        url: url,
        dataType: 'json',
        done: function (e, data) {
            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo('#files');
            });
        },
        progressall: function (e, data) {
            $("#progress").show();
            var progress = parseInt(data.loaded / data.total * 100, 10);
            $('#progress .progress-bar').css(
                'width',
                progress + '%'
            );
            alert('Image uploaded successfully. It will refresh automatically.');

        }
    }).prop('disabled', !$.support.fileInput)
        .parent().addClass($.support.fileInput ? undefined : 'disabled');
});

Here is the place where image will show at the moment it is showing old image. which i fetched from data base during page load.

<img id="bg1" src="files/<?php echo $big_logo;?>" class="simples-img1">

JSON data from server after image upload

"files":[{"name":"472a37f6225c49a1febfb3b52100d77f1.png","size":93032,"type":"image\/png","title":null

It looks like file name is coming from server but i don't know how can i use it to show on webpage.

Answer 1

If

"name":"472a37f6225c49a1febfb3b52100d77f1.png"

is path to image file ? You can use .attr() at :done(function() {}) to set src of img#bg1 to data.result.files[0].name

done: function (e, data) {

            $("#bg1").attr("src", "files/" + data.result.files[0].name);

            $.each(data.result.files, function (index, file) {
                $('<p/>').text(file.name).appendTo('#files');
            });
        },