Сегодня мы хотим рассказать вам о том, как реализовать функционал загрузки нескольких изображений без необходимости перезагружать страницу, который можно встретить на множестве современных социальных сетей. Мы будем использовать jQuery и PHP. Мы лишь исправили несколько строк кода в плагине jquery.form.js и переименовали его в jquery.wallform.js. Эта функция является ключевым свойством Wall Script, и мы хотели бы поблагодарить Arun Sekar за этот трюк.
javascript-код
$(«#photoimg»).live(‘change’,function(){})- photoimg – это имя id тега INPUT FILE, а $(‘#imageform’).ajaxForm() — imageform – это имя ID тега FORM. При изменении INPUT, без необходимости перезагружать страницу при помощи метода ajaxForm() запускается подтверждение FORM. Загруженные изображения будут обозначены тегом #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:
Простой дизайн базы данных для пользователей (Users)
Users
Содержит информацию о пользователях: никнейм, пароль, email, изображение профиля, миниатюру изображения профиля и так далее.
CREATE TABLE `users` (
`uid` int(11) AUTO_INCREMENT PRIMARY KEY,
`username` varchar(255) UNIQUE KEY,
`password` varchar(100),
`email` varchar(255) UNIQUE KEY,
`profile_image` varchar(200),
`profile_image_small` varchar(200),
)ajaximage.php
Состоит из PHP-кода. Этот скрипт помогает вам загружать изображения в папку uploads. Имя файла изображения изменяется на timestamp+session_id.extention