Xin chào tất cả các bạn, chào mừng các bạn đã quay trở lại với series hướng dẫn xây dựng trang tin tức bằng PHP. Ở bài trước chúng ta đã hoàn thành xong các chức năng của chuyên mục rồi, hôm nay mình sẽ hướng dẫn các bạn xây dựng các chức năng của hình ảnh. Bây giờ chúng ta bắt đầu thôi!
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.
1. Khái quát
Một trong những phần không thể thiếu của trang tin tức đó là hình ảnh [tiếng anh là images]. Một bài viết mà không có hình ảnh minh hoạ thì rất là nhàm chán phải không nào! Cho nên vì thế chúng ta sẽ xây dựng chức năng này cho ứng dụng của mình.
Các đặc điểm và chức năng trong phần này là:
- Upload ảnh
- Kiểm tra lượng ảnh upload tối đa trong một lần.
- Kiểm tra kích thước [size] của ảnh khi upload.
- Kiểm tra đuôi mở rộng của ảnh khi upload.
- Xoá ảnh
- Bảng hiển thị danh sách hình ảnh
- Không phần quyền tài khoản [vì các tác giả có thể upload hình ảnh cho bài viết của mình]
2. Tạo table hình ảnh và folder lưu trữ
Các bạn tạo table images và chạy lênh SQL sau:
Bài viết này được đăng tại [free tuts .net]
CREATE TABLE `images` [ `id_img` int[11] NOT NULL, `url` text COLLATE utf8_unicode_ci NOT NULL, `type` varchar[5] COLLATE utf8_unicode_ci NOT NULL, `size` int[11] NOT NULL, `date_uploaded` datetime NOT NULL ] ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci; ALTER TABLE `images` ADD PRIMARY KEY [`id_img`]; ALTER TABLE `images` MODIFY `id_img` int[11] NOT NULL AUTO_INCREMENT;
Chúng ta sẽ được table như sau:
Trong đó:
url: là đường dẫn của hình ảnh, bao gồm domain [Ví dụ: //domain.com/upload/image.jpg]type: là đuôi mở rộng của ảnh [Ví dụ: jpg, png, jpeg, gif, ...]size: là kích thước của ảnh, đơn vị là byte
Để tạo folder chứa các hình ảnh, các bạn tạo cho mình folder upload cùng cấp với folder admin. Mình không để folder này trong folder admin vì khi người dùng xem url ảnh thì sẽ thấy đường dẫn /admin/upload/ nên rất là nguy hiểm.
3. Phân trang hình ảnh
Trong phần hình ảnh này, chúng ta sẽ phân ra 2 trang:
- Trang hiển thị danh sách hình ảnh [//domain.com/admin/photos/]
- Trang upload hình ảnh [//domain.com/admin/photos/add]
Các bạn mở file admin/templates/photos.php lên và dán nội dung sau:
4. Upload hình ảnh
Các bạn vào đường dẫn //domain.com/admin/photos/add để bắt đầu làm nhé!
Xây dựng template
Các bạn mở file admin/templates/photos.php lên và dán đoạn code này vào bên dưới dòng // Content upload hình ảnh:
echo
'
Mỗi lần upload tối đa 20 file ảnh. Mỗi file có dung lượng không vượt quá 5MB và có đuôi định dạng là .jpg, .png.gif.,
Chọn hình ảnh
Ảnh xem trước
Upload
Chọn lại
';Sau đó các bạn chạy lại trang thì sẽ được kết quả như sau:
Mở file admin/js/form.js lên và copy các đoạn code sau:
Đầu tiên là chức năng xem ảnh trước khi upload:
// Xem ảnh trước
function preUpImg[] {
img_up = $['#img_up'].val[];
count_img_up = $['#img_up'].get[0].files.length;
$['#formUpImg .box-pre-img'].html['Ảnh xem trước
'];
$['#formUpImg .box-pre-img'].removeClass['hidden'];
// Nếu đã chọn ảnh
if [img_up != '']
{
$['#formUpImg .box-pre-img'].html['Ảnh xem trước
'];
$['#formUpImg .box-pre-img'].removeClass['hidden'];
for [i = 0; i 20] {
$['#formUpImg button[type=submit]'].html['Upload'];
$['#formUpImg .alert'].removeClass['hidden'];
$['#formUpImg .alert'].html['Số file upload cho mỗi lần vượt quá mức cho phép.'];
} else if [error_type_img >= 1] {
$['#formUpImg button[type=submit]'].html['Upload'];
$['#formUpImg .alert'].removeClass['hidden'];
$['#formUpImg .alert'].html['Một trong những file ảnh không đúng định dạng cho phép.'];
} else {
$[this].ajaxSubmit[{
beforeSubmit: function[] {
target: '#formUpImg .alert',
$["#formUpImg .box-progress-bar"].removeClass['hidden'];
$["#formUpImg .progress-bar"].width['0%'];
},
uploadProgress: function [event, position, total, percentComplete]{
$["#formUpImg .progress-bar"].animate[{width: percentComplete + '%'}];
$["#formUpImg .progress-bar"].html[percentComplete + '%'];
},
success: function [data] {
$['#formUpImg button[type=submit]'].html['Upload'];
$['#formUpImg .alert'].attr['class', 'alert alert-success'];
$['#formUpImg .alert'].html[data];
},
error: function[] {
$['#formUpImg button[type=submit]'].html['Upload'];
$['#formUpImg .alert'].removeClass['hidden'];
$['#formUpImg .alert'].html['Không thể upload hình ảnh vào lúc này, hãy thử lại sau.'];
},
resetForm: true
}];
return false;
}
// Ngược lại không chọn ảnh
} else {
$['#formUpImg button[type=submit]'].html['Upload'];
$['#formUpImg .alert'].removeClass['hidden'];
$['#formUpImg .alert'].html['Vui lòng chọn tệp hình ảnh.'];
}
}];Mình đã chú thích kĩ bên trong rồi nên sẽ không giải thính thêm nữa.
Viết PHP xử lý dữ liệu
Các bạn tạo cho mình file admin/photos.php và chèn nội dung này vào: