VZN.vn
Tin tức giải trí 24h, scandal showbiz Việt và thế giới

Hướng dẫn Upload hình ảnh bằng PHP và JQuery (không tải lại trang)

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?

0 107

Để 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(){})photoimg là 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().

 <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.

Loading...
 <?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 …

 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

 <?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.

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

 

Loading...