Thêm form Files uploader cho website với uploadify

Uploadify là trình uploader được viết bằng javascript có sử dụng ngôn ngữ server PHP làm nhiệm vụ sử lý upload hoặc bạn cũng có thể thực hiện tải file lên server với phiên bản Flash.

Cài đăt thư viện uploadify rất đơn giản, bạn tải file zip của uploadify rồi giải nén và copy những files .js, .css và file chạy PHP lên hosting. Chúng ta được phép sửa đổi tham số và code trực tiếp vào các files trong thư viện, bằng cách đó bạn dễ dàng đổi thư mục upload và các tùy chỉnh khác nếu bạn có thể.
Sau khi giải nén bạn có những files sau:

• jquery.uploadify-3.1.min.js
• uploadify.php
• uploadify.swf
• uploadify.css
• uploadify-cancel.png
• check-exists.php (file này dùng để kiểm tra sự tồn tại của files upload trong thư mục đến của file upload.)

Thêm thư viện jquery uploadify vào trong thẻ head như mọi thư viện javascript khác.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/jquery.uploadify-3.1.min.js"></script>

Đảm bảo jquery chèn trước file js trên.

Yêu cầu duy nhất thẻ input file của thành phần form.

<input type="file" name="file_upload" id="file_upload" />

Khởi tạo trình uploader vào thẻ input trên với đoạn code js sau đây:

<?php $timestamp = time();?>
$(function() {
    $('#file_upload').uploadify({
		'formData'     : {
					'timestamp' : '<?php echo $timestamp;?>',
					'token'     : '<?php echo md5('unique_salt' . $timestamp);?>'
				},
        'swf'      : 'uploadify.swf',
        'uploader' : 'uploadify.php'
        // Put your options here
    });
});

Chèn thêm CSS làm đẹp cho page, sửa file uploadify.css nếu muốn vào thêm vào trang trong thẻ head.

<link rel="stylesheet" type="text/css" href="uploadify.css" />

Trước khi tải các files lên server, bạn tạo folder đến để chứa các file đã upload. Lưu ý: thiết lập quyền permission 755 cho phép ghi dữ liệu vào folder.
Tiếp theo, mở file uploadify.php bằng notepadd++ và sửa lại một vài thông số như folder tải lên, các định dạng file cho phép tải lên, ..

– Sửa lại folder đến ở biến $targetPath.

$targetPath = $_SERVER['DOCUMENT_ROOT'] .$targetFolder;

– Liệt kê các phần mở rộng của file được phép upload vào mảng $fileTypes.

$fileTypes = array('jpg','jpeg','gif','png','as'); // File extensions

– Sửa tên file sau khi tải lên vào biến $targetFile.

$targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];

Dữ liệu form

Truyền dữ liệu form vào file sử lý uploadify.php thông qua thuộc tính formData.
Như ở ví dụ trên, mình có truyền 2 tham số timestamp và token với mục đích bảo mật đảm bảo file uploadify.php được gọi từ giao diện uploadify không phải hack từ bên ngoài.

Các dữ liệu form này được truyền với phương thức POST vào file sử lý có khai báo tại thuộc tính “uploader”.

#uploadify.php
$verifyToken = md5('unique_salt' . $_POST['timestamp']);
if (!empty($_FILES) && $_POST['token'] == $verifyToken) {
....

Nếu không thích dùng tham số FORM bạn có thể bỏ qua và nhớ cũng chỉnh lại file sử lý cho đúng.

Uploadify sử dụng flash hỗ trợ trong việc upload. Demo:

Uploadify hỗ trợ tải nhiều files cùng một lúc lên server. Học thêm cách tùy chỉnh cài đặt cho uploadify tại đây.

Tham khảo thêm thư viện khác:
http://hayageek.com/jquery-multiple-file-upload/
https://github.com/blueimp/jQuery-File-Upload

Để nhận được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng có thể nhận được sự trợ giúp trên Twitter và Facebook