Как сделать графическую загрузку изображений?

Question

[Роман]

Делаю сайт, и в каждый пост нужно добавлять картинки, ну и я их добавляю лучше вам не знать как)

хочу сделать вот так

т.е. как на OLX.ua
пример кода, или какие-то наброски бы мне)

Answer 1

[Сергей]

1) Делаете верстку этих превьющек
<div class="attach">Загрузить</div>
2) Пишете скрипт который бы при клике открывал окно выбора файла, а после выбора отправлял файл на сервер.

(function($){$(function(){

    var attach = function(opt){

        var self = this;

        var _opt = {
            'url' : '/attach/'
        };

        var data;

        this.init = function(){

            opt = $.extend({}, _opt, opt);

            self.open();

            self.change();
        };

        this.open = function(){

            $(document).on('click', '.attach', function(e){

                e.preventDefault();

                var $node = $(e.target);

                data = $node.data('data');

                var $attach_file = $node.siblings('.attach_file');

                if(!$attach_file.length){

                    var accept = '';

                    if(data !== undefined && data.accept !== undefined){

                        accept = ' accept="'+data.accept+'"';
                    }

                    $attach_file = $('<input type="file" class="attach_file"'+accept+'>').hide();

                    $node.after($attach_file);
                }

                $attach_file.click();
            });
        };

        this.change = function(){

            $(document).on('change', '.attach_file', function(e){

                var $node = $(e.target);

                var form = new FormData();

                form.append('attach', $node.get(0).files[0]);

                self.start_load();

                $node.prop('disabled', true);

                $.ajax({
                    url: opt.url,
                    data: form,
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    success: function(response){

                        self.stop_load();

                        $node.prop('disabled', false);

                        self.response(response);
                    }
                });
            });
        };

        this.response = function(data){
            //TODO:: Обработка ответа
        };

        this.start_load = function(){
            //TODO::Начало загрузки
        };

        this.stop_load = function(){
            //TODO::Окончание загрузки
        };
    };

    new attach().init();

});})(jQuery);

3) На стороне сервера принимаете файл. Я бы оригинал сохранил во временную папку "tmp/myphoto.jpeg", и создал бы еще одно уменьшенное для превьюшки "tmp/small_myphoto.jpeg". Кстати лучше получить уникальное имя файла на PHP к примеру можно сделать так

$filename=md5(microtime(TRUE).mt_rand(0, 99999).'myphoto.jpeg');

4) В ответ отправляете название вновь созданного файла
5) В методе "response" в моем примере, вставляете превьюшку в DOM, так же можете вставить поле "hidden", в значение которого вставите имя файла.
6) После отправки всей формы на стороне сервера пишете код который переносит файлы в постоянное место размещения и сохраняете данные в базу.