Выбор и загрузка нескольких изображений при помощи Ajax на jQuery » Techno-Co — Всё для вебмастера, для создание сайтов с нуля. {title}

Несколько месяцев назад мы публиковали статью о том, каким образом мы можем загружать сразу несколько изображений при помощи 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:
Uploading....



ajaxImageUpload.php

Содержит PHP-код. Этот скрипт помогает вам загружать изображения в папку uploads, а затем переименовывает файлы изображения в формат timestamp+session_id.extention во избежание появления дубликатов. Такая система будет сохранять файлы изображения в user_uploads с таблицами id сессии пользователя.