9.11.13, 01:47
0 комментарий
  Уроки

Выбор и загрузка нескольких изображений при помощи Ajax на jQuery

Несколько месяцев назад мы публиковали статью о том, каким образом мы можем загружать сразу несколько изображений при помощи AJAX-функционала и PHP без необходимости перезагружать страницу. Сегодня же мы хотим рассказать вам о том, как можно выбирать и загружать сразу несколько изображений. И в этом нам поможет великолепный и удобный фрагмент кода от Lakshmi Maddukuri. Просто взгляните на представленное демо.



Пример базы данных для пользователей

Users

Содержит данные пользователя в полях username, password, email, profile_image и profile_image_small

CREATE TABLE `users` (
`user_id` int(11) AUTO_INCREMENT PRIMARY KEY,
`username` varchar(255) UNIQUE KEY,
`password` varchar(100),
`email` varchar(255) UNIQUE KEY
)


User Uploads

Содержит информацию о загрузках пользователя в полях upload_id, image_name, user_id_fk(ключ) и timestamp.

CREATE TABLE  `user_uploads` (
`upload_id` int(11) AUTO_INCREMENT PRIMARY KEY,
`image_name` text,
`user_id_fk` int(11),
`created` int(11)
)


javascript-код

$("#photoimg").live('change',function(){})- photoimg – это ID для тега INPUT FILE и $('#imageform').ajaxForm() - imageform – это ID для FORM. При изменении INPUT, подтверждение FORM запускается автоматически без перезагрузки страницы посредством метода ajaxForm(). Загруженные изображения будут отображены prepend внутри тега #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='ajaxImageUpload.php' style="clear:both">
Upload image: 
<div id='imageloadstatus' style='display:none'><img src="loader.gif" alt="Uploading...."/></div>
<div id='imageloadbutton'>
<input type="file" name="photos[]" id="photoimg" multiple="true" />
</div>
</form>


ajaxImageUpload.php

Содержит PHP-код. Этот скрипт помогает вам загружать изображения в папку uploads, а затем переименовывает файлы изображения в формат timestamp+session_id.extention во избежание появления дубликатов. Такая система будет сохранять файлы изображения в user_uploads с таблицами id сессии пользователя.

<?php
error_reporting(0);
session_start();
include('db.php');
$session_id='1'; //$session id
define ("MAX_SIZE","2000"); // 2MB MAX file size
function getExtension($str)
{
$i = strrpos($str,".");
if (!$i) { return ""; }
$l = strlen($str) - $i;
$ext = substr($str,$i+1,$l);
return $ext;
}
// Valid image formats 
$valid_formats = array("jpg", "png", "gif", "bmp","jpeg");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") 
{
$uploaddir = "uploads/"; //Image upload directory
foreach ($_FILES['photos']['name'] as $name => $value)
{
$filename = stripslashes($_FILES['photos']['name'][$name]);
$size=filesize($_FILES['photos']['tmp_name'][$name]);
//Convert extension into a lower case format
$ext = getExtension($filename);
$ext = strtolower($ext);
//File extension check
if(in_array($ext,$valid_formats))
{
//File size check
if ($size < (MAX_SIZE*1024))
{ 
$image_name=time().$filename; 
echo "<img src='".$uploaddir.$image_name."' class='imgList'>"; 
$newname=$uploaddir.$image_name; 
//Moving file to uploads folder
if (move_uploaded_file($_FILES['photos']['tmp_name'][$name], $newname)) 
{ 
$time=time(); 
//Insert upload image files names into user_uploads table
mysql_query("INSERT INTO user_uploads(image_name,user_id_fk,created) VALUES('$image_name','$session_id','$time')");
}
else 
{ 
echo '<span class="imgList">You have exceeded the size limit! so moving unsuccessful! </span>'; } 
}

else 
{ 
echo '<span class="imgList">You have exceeded the size limit!</span>'; 
} 

} 

else 
{ 
echo '<span class="imgList">Unknown extension!</span>'; 
} 

} //foreach end

} 
?>


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");
?>


CSS-код

Стиль для блока изображений.

#preview
{
color:#cc0000;
font-size:12px
}
.imgList 
{
max-height:150px;
margin-left:5px;
border:1px solid #dedede;
padding:4px; 
float:left; 
}


Исходники в архиве.

Напишите своё мнение