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