RSSJavascript - Jquery - Ajax

Upload ảnh sử dụng ajax và jquery

Nếu bạn đã từng tham gia nhiều project, thực hiện nhiều với việc phải upload ảnh lên server, nhưng đều phải reload lại trang, còn bài viết sau lại hướng dẫn bạn thực hiện công việc đó mà không cần phải load lại trang

Upload ảnh sử dụng ajax và jquery

Nếu bạn đã từng tham gia nhiều project, thực hiện nhiều với việc phải upload ảnh lên server, nhưng đều phải reload lại trang, còn bài viết sau lại hướng dẫn bạn thực hiện công việc đó mà không cần phải load lại trang

upload images with ajax and jquery
Bài viết có sử dụng plugin là jquery.form để thực hiện việc upload ảnh, ngoài ra, bạn cũng có upload video, movie hay file nếu bạn muốn.
I.Database
Thiết kế một database đơn giản nào

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),
)

II.HTML
Tiếp theo bạn thiết kế một trang html với control upload như sau:

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

Bạn chú ý, form xử lý dữ liệu sẽ được gửi đến file ajaximage.php bằng thuộc tính action.
III.Jquery
Đoạn quan trọng đây rồi. Chúng ta add plugin jquery.form vào, sau đó lấy sự kiện live của tag html có Id là #photoimg. Sau đó submit form sử dụng hàm ajaxForm() để không phải reload trình duyệt.

<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="Uploading...."/>');
$("#imageform").ajaxForm(
{
target: '#preview'
}).submit();
});
}); 
</script>

Và cuối cùng là file ajaximage.php dùng để xử lý việc upload và hiển thị.

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

Chúc bạn thành công

Download Code

(9Lessions)

 

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu