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

Если вы ищите рабочий Ajax скрипт выгрузки файлов/изображений без перезагрузки страницы на jQuery, то вы попали куда надо.

Скрипт релизован с помощью Ajax формы из плагина jquery.form и PHP кода для выгрузки изображений. В результате всего несколько строчек JavaScript кода и выгрузка готова. По этому поводу вы можете посмотреть реклама в интернете

JavaScript
В коде $("#photoimg").live('change',function(){}) photoimg является именем ID элемента INPUT, а в $('#imageform').ajaxForm() imageform является именем ID элемента FORM. С помощью метода ajaxForm(), при изменении INPUT происходит вызов и принятие элемента FORM без перезагрузки страницы.

<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=1. Это означает, что значение сессии пользователя равно 1.

<?php
include('db.php');
session_start();
$session_id='1'; // Значение пользовательской сессии
?>

<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
Upload image <input type="file" name="photoimg" id="photoimg" />
</form>
<div id='preview'>
</div>

Теперь создадим базу данных пользователей.

Пользователи
Содержит следующие данные: username, password, email, profile_image и profile_image_small и т.д.

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

Если вы захотите не много отвлечься от темы Ajax выгрузки и немного отдохнуть/поиграть, то я могу порекомендовать вам следующий ресурс игры на samsung galaxy s2, где найдете разнообразные игры для этого смартфона. Отдохнули? Поехали дальше...

ajaximage.php
Содержит PHP код. Этот скрипт загружает изображения в папку на сервере. Имя файла изображения будет переименовано в timestamp+session_id.extention (метка времени+пользовательский id).
<?php
include('db.php');
session_start();
$session_id='1'; // User session 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)) // 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 "failed";
}
else
echo "Image file size max 1 MB";
}
else
echo "Invalid file format..";
}
else
echo "Please select image..!";
exit;
}
?>

Вроде все.
Теги:
Ajax
Добавлено: 18 Апреля 2018 16:09:52 Добавил: Андрей Ковальчук Нравится 0
Добавить
Комментарии:
Нету комментариев для вывода...