Загрузка изображений на сайт без перезагрузки страницы

В этом примере я покажу тебе, как с помощью современных технологий в веб-программировании реализовать загрузку изображений на сервер не перезагружая при этом страницу в браузере. Скрипт работает посредствам jQuery.

Обработка формы без перезагрузки

Использовать скрипт можно для чего угодно: загрузка фоток, файлов или даже видео. Всего пять строк js кода)

Скачать скрипт:

JS- код
$("#photoimg").live('change',function(){}) - "photoimg" это айдишник input- тега, а $('#imageform').ajaxForm() - айдишник формы. используя метод ajaxForm().

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#photoimg').live('change', function()
{
$("#preview").html('');
$("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm(
{
target: '#preview'
}).submit();
});
});
</script>

index.php
Файл состоит из простого PHP и HTML кода. В $session_id присваевается id пользователя.

include('db.php');
session_start();
$session_id='1'; // эмулируется запись айдишника рользователя в сессии
?>
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
Загрузка изображения <input type="file" name="photoimg" id="photoimg" />
</form>
<div id='preview'>
</div>

ajaximage.php
Состоит из PHP- кода. Данный файл вызывается после нажатия на кнопку загрузки. Изображения загружаются в папку "uploads".

<?php
include('db.php');
session_start();
$session_id='1'; // id пользователя
$path = "uploads/";
$valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST"){
$name = $_FILES['photoimg']['name'];
$size = $_FILES['photoimg']['size'];
if(strlen($name)){
list($txt, $ext) = explode(".", $name);
if(in_array($ext,$valid_formats)){
if($size<(1024*1024)) { // ограничение размера фотки
$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;
}
?>

И напоследок, база данных:
Создадим таблицу пользователей.

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),
)