Техно-мир

Сегодня мы хотим рассказать вам о том, как реализовать функционал загрузки нескольких изображений без необходимости перезагружать страницу, который можно встретить на множестве современных социальных сетей. Мы будем использовать 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