How to upload an image using ajax and then replace it as a div?

Question

So, I have a concept that I upload .jpg or .png, which has all the interface images (arrows, buttons, borders, etc. used on the site). Then, when I want to use it, I just make a div:

<div id="img_left_arrow"></div>

Then in css I reference the part of the image that I want:

.img_left_arrow {
    background-image:url("path/to/file.png");
    background-repeat:no-repeat;
    background-position:-24px -80px;
    width:200px;
    height:400px;
}

Thus, this image will be located at 24 pixels across, 80 pixels down on file.png, and the image will be 200x400 pixels. So now where the div is, the image will show.

, , ( ), . div. , , (, js, ..), - ( script ):

-

<div id="mainLoadProg"></div>

- div ( css, )

<div id="jscriptCode"></div>

- php, (size.php)

echo strlen(json_encode(file_get_contents("path/to/file.js")));

- (code.php)

echo json_encode(file_get_contents("path/to/file.js"));

- jquery ( )

$(function() {
    $('#mainLoadProg').progressbar({ value: 0 });
    //get the size first
    $.ajax({
        type: "POST",
        url: "size.php",
        dataType: 'json',
        success: function(recData) {
            loadPageContent(recData); //run function with data size
        }
    });
});

//function to receive data and show progress bar
function loadPageContent(size) {
    $.ajax({
        xhr: function() {
            var xhr = new window.XMLHttpRequest();
            xhr.addEventListener("progress", function(evt) {
                downloadedAmount = evt.loaded;
                downloadedPercent = (downloadedAmount / size)*100;
                $('#mainLoadProg').progressbar({ value: downloadedPercent });
            }, false);
            return xhr;
        },
        type: "POST",
        url: "code.php",
        dataType: 'json',
        success: function(recData) {
            $("#jscriptCode").html(recData); //load the code from the php page into the div
        }
    });
});

, php-, :

<img src="path/to/file.png">

, . - PHP:

echo json_encode(base64_encode(file_get_contents("path/to/file.png")));

strlen, . base64 div, div? , "//file.png", !

?

Answer 1

, , ! https://gist.github.com/markmichon/6510134