Thông thường khi bạn Upload hình ảnh bằng PHP sẽ phải tải lại trang, nhưng nhiều lúc bạn không muốn điều đó xảy ra, vậy làm sao để Upload hình ảnh bằng PHP mà không tải lại trang?
Để làm được điều đó rất đơn giản hãy kết hợp PHP và JQuery. Bài viết này sẽ hướng dẫn các bạn kết hợp chúng ra sao để được một trang upload hình ảnh mà không tải lại trang.
MãJavascript:
$("#photoimg").live('change',function(){})- photoimglà tên ID của file ảnh chọn upload
$('#imageform').ajaxForm() - imageform là tên ID của form upload. Khi nội dung của thẻ Input được thay đổi (hành động chọn ảnh) thì hành động này sẽ gọi thực thi hành động submit (đăng ảnh) thông qua phương thức ajaxForm().
Ví dụ
<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="Đang tải...."/>');
$("#imageform").ajaxForm(
{
target: '#preview'
}).submit();
});
});
</script>Index.php
Chứa mã PHP và HTML đơn giản. Ở đây $session_id = 1 có nghĩa là giá trị phiên id của người dùng.
Ví dụ
<?php
include('db.php');
session_start();
$session_id='1'; // User login session value
?>
<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>Thiết kế cơ sở dữ liệu mẫu cho người dùng.
Users
Chứa thông tin chi tiết cá nhân username, password, email, profile_image và profile_image_small ...
Ví dụ
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
Nội dung mã PHP. Tệp tin này giúp bạn đăng ảnh vào thư mục uploads. Tên file ảnh sẽ đựa thay đổi theo dạng timestamp+session_id.extention
Ví dụ
<?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)) // Kích cỡ ảnh không quá 1 MB
{
$actual_image_name = time().$session_id.".".$ext;
$tmp = $_FILES['photoimg']['tmp_name'];
if(move_uploaded_file($tmp, $path.$actual_image_name))
{
mysqli_query($db,"UPDATE users SET profile_image='$actual_image_name' WHERE uid='$session_id'");
echo "<img src='uploads/".$actual_image_name."' class='preview'>";
}
else
echo "Lỗi";
}
else
echo "Kích cỡ ảnh không quá 1 MB";
}
else
echo "Sai định dạng..";
}
else
echo "Vui lòng chọn ảnh..!";
exit;
}
?>db.php
Tập tin cấu hình cơ sở dữ liệu, thay đôi username, password và database.
Ví dụ
<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'username');
define('DB_PASSWORD', 'password');
define('DB_DATABASE', 'database');
$db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
?>