AJAX, PHP ? jQuery? ???? ?? ??? ???

? ????? AJAX ??? ???? ?? ???? ????? ??? ????. ???? AJAX? ?? ?? ??? ???? ? ???? ?? ?? ??? ??????? ?????. ? ????? JSON? ???? ?? ??? ????? ???? ???? ???? ???? ???? ???? ?????.

HTML

?? HTML ??? ? ???? ??? ?????. ??? ? ?? ?? ??, ?? ??, ??? ??? ?? ?? ?? ?????. ??:

<div>

CSS

?? ??? ???? ?? ??? ?????? ???? ??? ??? ???? ?? ???? ???????.

#uploads {
  display: block;
  position: relative;
}

#uploads li {
  list-style: none;
}

JavaScript

JavaScript ??? ??? ?????. ??? ????, AJAX? ???? ??? ?????. ?? ?? ??? ?? JSON? ???? ?? ???? HTML5 ??? ??????.

$(document).on("change", "input[name^='file']", function (e) {
    e.preventDefault();
    var This = this,
        display = $("#uploads");

    // process file object
    $.each(This.files, function (i, file) {
        var reader = new FileReader(),
            dfd = new $.Deferred();
        reader.onload = function (e) {
            // convert file to data URL
            dfd.resolveWith(file, [e.target.result])
        };
        reader.readAsDataURL(new Blob([file], {
            "type": file.type
        }));
        dfd.then(function (data) {
            // send file data using AJAX
            $.ajax({
                url: "/echo/json/",
                type: "POST",
                data: {
                    "file": JSON.stringify({
                        "file": data,
                        "name": file.name,
                        "size": file.size,
                        "type": file.type
                    })
                }
            })
            .then(function (data, textStatus, jqxhr) {
                console.log(data)
                display.append("<br /><li>", img, "</li><br />");
                return data
            }, function (jqxhr, textStatus, errorThrown) {
                console.log(errorThrown);
                return errorThrown
            });
        })
    });
});

PHP

PHP ????? JSON ???? ???? ?? ???? ???? ?????. JSON ????:

<?php
if (isset($_POST["file"])) {
    // process file object
    $file = json_encode($_POST["file"]);
    // return file as JSON string
    echo $file;
};
?>

??? ??? ???? AJAX? ???? ?? ???? ????? ???? ? ????. PHP? jQuery. JSON ?? ??? ?? ??? ?????, ??? ??? ???? ??? ??? ?? ??? ???? ???? ??? ??? ??????.

? ??? AJAX, PHP ? jQuery? ???? ?? ???? ????? ?????? ??? ?? ????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!