2 203 Если вы ищите рабочий Ajax скрипт выгрузки файлов/изображений без перезагрузки страницы на jQuery, то вы попали куда надо.
Скрипт релизован с помощью Ajax формы из плагина jquery.form и PHP кода для выгрузки изображений. В результате всего несколько строчек JavaScript кода и выгрузка готова. По этому поводу вы можете посмотреть реклама в интернете
JavaScript
В коде $("#photoimg").live('change',function(){}) photoimg является именем ID элемента INPUT, а в $('#imageform').ajaxForm() imageform является именем ID элемента FORM. С помощью метода ajaxForm(), при изменении INPUT происходит вызов и принятие элемента FORM без перезагрузки страницы.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script type="text/javascript" src="http://ajax.googleapis.com/ ajax/libs/jquery/<strong>1.5</strong>/jquery.min.js"></script> <script type="text/javascript" src="<strong>jquery.form.js</strong>"></script> <script type="text/javascript"> $(<strong>document</strong>).ready(<strong>function</strong>() { $(<strong>'#photoimg'</strong>).live('change', <strong>function</strong>() { $("#preview").html(''); $("#preview").html('<img src="loader.gif" alt="Uploading...."/>'); $("#imageform").<strong>ajaxForm</strong>( { target: '#preview' }).submit(); }); }); </script> |
index.php
Содержит простой PHP и HTML код. Стоит отметить $session_id=1. Это означает, что значение сессии пользователя равно 1.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<?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 и т.д.
|
1 2 3 4 5 6 7 8 |
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).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<?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; } ?> |
Вроде все.
Спасибки, все работает
Единственное надо убрать запятую перед закрывающейся скобкой в sql-запросе на создание таблицы users. Иначе запрос выдает ошибку.
спасибо. поправили.
А не посоветуете где посмотреть скриптик со следующим функционалом:
При загрузке создание превью, оригинал и превью в указанные папки, после загрузки вывод изоброжения и кода для него (превью + ссылка на оригинал)
насколько я понимаю что к вашему надо добавить создание превью и вывод кода, но я не знаю как это сделать.