Множественная загрузка изображений без перезагрузки страницы, используя Ajax и jQuery

Сегодня я представляю вам самый главный элемент социальных сетей – множественную загрузку изображений без перезагрузки страницы, используя 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 формы. При изменении поля input функция возвращает форму без перезагрузки страницы, используя метод ajaxForm(). Загруженные изображения будут добавляться в начало списка внутри элемента #preview.

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.wallform.js"></script>
<script type="text/javascript">
$(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();
});

}); 
</script>

Здесь скрытие и отображение элементов #imageloadstatus и #imageloadbutton основано на статусе загрузки формы.

Файл index.php

Этот файл содержит простой код PHP и HTML. Здесь $session_id=1 означает значение id пользователя из сессии.

<?php
include('db.php');
session_start();
$session_id='1'; // Id авторизованного пользователя из сессии
?>
<div id='preview'>
</div>
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>

Загрузить изображение:

<div id='imageloadstatus' style='display:none'><img src="loader.gif" alt="Загрузка...."/></div>
<div id='imageloadbutton'>
<input type="file" name="photoimg" id="photoimg" />

</div>
</form>

Пример проектирования базы данных пользователей

Следующая таблица содержит данные пользователей: имя пользователя, пароль, e-mail, фотографию профиля, уменьшенную фотографию профиля и т.п.

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. Имя файла загружаемого изображения изменяется на штамп_ времени+id_пользователя.расширение

<?php
include('db.php');
session_start();
$session_id='1'; // Id пользователя из сессии
$path = "uploads/";

function getExtension($str)
{
$i = strrpos($str,".");
if (!$i)
{
return "";
}
$l = strlen($str) - $i;
$ext = substr($str,$i+1,$l);
return $ext;
}

$valid_formats = array("jpg", "png", "gif", "bmp","jpeg","PNG","JPG","JPEG","GIF","BMP");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(strlen($name))
{
$ext = getExtension($name);
if(in_array($ext,$valid_formats))
{
if($size<(1024*1024)) // Image size max 1 MB
{
$actual_image_name = time().$session_id.".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$actual_image_name))
{
mysql_query("UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");
echo "<img src='uploads/".$actual_image_name."' class='preview'>";
}
else
echo "ошибка";
}
else
echo "Максимальный размер файла 1 MB"; 
}
else
echo "Неверный формат файла."; 
}
else
echo "Пожалуйста, выберите изображение!";
exit;
}
?>

Файл db.php

Файл конфигурации базы данных. Просто измените информацию доступа к базе.

<?php
$mysql_hostname = "localhost";
$mysql_user = "username";
$mysql_password = "password";
$mysql_database = "database";
$prefix = "";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("Ой, что-то пошло не так");
mysql_select_db($mysql_database, $bd) or die("Ой, что-то пошло не так ");
?>

Перевод статьи “Multiple Ajax Image Upload without Refreshing Page using Jquery” был подготовлен дружной командой проекта Сайтостроение от А до Я.