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) После отправки всей формы на стороне сервера пишете код который переносит файлы в постоянное место размещения и сохраняете данные в базу.
Простой