Несколько месяцев назад мы публиковали статью о том, каким образом мы можем загружать сразу несколько изображений при помощи AJAX-функционала и PHP без необходимости перезагружать страницу. Сегодня же мы хотим рассказать вам о том, как можно выбирать и загружать сразу несколько изображений. И в этом нам поможет великолепный и удобный фрагмент кода от Lakshmi Maddukuri. Просто взгляните на представленное демо.Пример базы данных для пользователей
Users
Содержит данные пользователя в полях username, password, email, profile_image и profile_image_small
CREATE TABLE `users` (
`user_id` int(11) AUTO_INCREMENT PRIMARY KEY,
`username` varchar(255) UNIQUE KEY,
`password` varchar(100),
`email` varchar(255) UNIQUE KEY
)User Uploads
Содержит информацию о загрузках пользователя в полях upload_id, image_name, user_id_fk(ключ) и timestamp.
CREATE TABLE `user_uploads` (
`upload_id` int(11) AUTO_INCREMENT PRIMARY KEY,
`image_name` text,
`user_id_fk` int(11),
`created` int(11)
)javascript-код
$(«#photoimg»).live(‘change’,function(){})- photoimg – это ID для тега INPUT FILE и $(‘#imageform’).ajaxForm() — imageform – это ID для FORM. При изменении INPUT, подтверждение FORM запускается автоматически без перезагрузки страницы посредством метода ajaxForm(). Загруженные изображения будут отображены prepend внутри тега #preview.
$(document).ready(function()
{
$('#photoimg').live('change', function()
{
var A=$("#imageloadstatus");
var B=$("#imageloadbutton");
$("#imageform").ajaxForm({target: '#preview',
beforeSubmit:function(){
A.show();
B.hide();
},
success:function(){
A.hide();
B.show();
},
error:function(){
A.hide();
B.show();
} }).submit();
});
});
Здесь отображение и скрывание #imageloadstatus и #imageloadbutton основывается на состоянии подтверждения загрузки.
index.php
Содержит простой PHP и HTML-коды. Здесь $session_id=1 – это значение сессии для Id пользователя.
Upload image:
ajaxImageUpload.php
Содержит PHP-код. Этот скрипт помогает вам загружать изображения в папку uploads, а затем переименовывает файлы изображения в формат timestamp+session_id.extention во избежание появления дубликатов. Такая система будет сохранять файлы изображения в user_uploads с таблицами id сессии пользователя.