—»     —»   Ajax-загрузка нескольких фотографий без перезагрузки страницы при помощи jQuery
  Раздел: Ajax   Комментариев: 3  

Ajax-загрузка нескольких фотографий без перезагрузки страницы при помощи jQuery



Сегодня мы хотим рассказать вам о том, как реализовать функционал загрузки нескольких изображений без необходимости перезагружать страницу, который можно встретить на множестве современных социальных сетей. Мы будем использовать jQuery и PHP. Мы лишь исправили несколько строк кода в плагине jquery.form.js и переименовали его в jquery.wallform.js. Эта функция является ключевым свойством Wall Script, и мы хотели бы поблагодарить Arun Sekar за этот трюк.

Ajax-загрузка нескольких фотографий без перезагрузки страницы при помощи jQuery

Скачать скрипт | Посмотреть демо
Внимание! У вас нет прав для просмотра скрытого текста.


javascript-код

$("#photoimg").live('change',function(){})- photoimg – это имя id тега INPUT FILE, а $('#imageform').ajaxForm() - imageform – это имя ID тега FORM. При изменении INPUT, без необходимости перезагружать страницу при помощи метода ajaxForm() запускается подтверждение FORM. Загруженные изображения будут обозначены тегом #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'; // User login session value
?>
<div id='preview'>
</div>
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
Upload image:
<div id='imageloadstatus' style='display:none'><img src="loader.gif" alt="Uploading...."/></div>
<div id='imageloadbutton'>
<input type="file" name="photoimg" id="photoimg" />

</div>
</form>

Простой дизайн базы данных для пользователей (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

<?php
include('db.php');
session_start();
$session_id='1'; // User session 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 "failed";
}
else
echo "Image file size max 1 MB";
}
else
echo "Invalid file format..";
}
else
echo "Please select image..!";
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("Opps some thing went wrong");
mysql_select_db($mysql_database, $bd) or die("Opps some thing went wrong");
?>
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, PHP, ajax
Опубликовал Design FactoRy   Прочитано (раз): 11291   |   Оставлено комментариев: 3
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 25 сентября 2013 @ 14:32
Написал: Tokyo — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Побольше таких уроков пишите, ajax+php , мне как школоте полезно и интересно :)
Комментарий #2: 25 сентября 2013 @ 15:07
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Tokyo, ок, будут материалы - обязательно опубликуем.
Комментарий #3: 13 ноября 2013 @ 17:59
Написал: Виктор — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Здравствуйте. Подскажите пожалуйста, как ограничить количество загружаемых картинок? Скажем до четырех.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код




















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Январь 2017    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031