Upload file sử dụng Uploadifive

Uploadfive là một plugin được phát triển dựa trên nền tảng của JQuery. Nếu bạn đã từng biết đến plugin Uploadify thì đây là phiên bản miến phí và giới hạn chỉ cho phép upload được các file hình ảnh. Uploadifive là phiên bản nâng cao và có trả phí 5$ nó cho phép bạn dễ dàng tải các tập tin từ local nên server-side. Uploadifive cho phép bạn có thể upload được một hoặc nhiều file cùng một lúc với nhiều loại định dạng file khác nhau như .png, .jpeg, .gif, .png, .pdf, .doc, .docx. Theo cá nhân mình thì đây là một plugin khá hay cho bạn phát triển những ứng dụng cho phép người sử dụng tải nhiều tập tin.

Mình sẽ nêu ra một số ưu điểm của Uploadifive.

• Hỗ trợ chọn nhiều tập tin cùng một lúc, giúp tiết kiệm thao tác chọn tập tin so với cách truyền thống.
• Hỗ trợ kéo và thả giúp bạn kéo trực tiếp tập tin ở máy tính vào trình Uploader.
• Tiến trình upload thời gian thực, giúp bạn biết được % thành công trong quá trình tải
• Tùy biến tối ưu: Bạn có thể đặt dung lượng giới hạn của 1 tập tin, số tập tin tối đa được tải lên trong một phiên, xử lý tranh chấp trong quá trình tải nhờ hàng đợi.

Tiếp theo thì mình sẽ làm một ví dụ nhỏ

demo
|__uploads (Thư mục chứa tệp tin được tải nên)
|__inc 
|____uploadifive (Thư viện uploadifive)
|__index.php (File mã nguồn HTML)
|__uploadifive.php (File xử lý upload file phía server-side)

File index.php

Đầu tiên bạn cần chèn vào thư viện JQuery và plugin Uploadifive.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="inc/uploadifive/uploadifive.css" />
<script type="text/javascript" src="inc/uploadifive/jquery.uploadifive.js"></script>	 

Tiếp theo là chúng ta sẽ có một form cho phép chọn file. Lưu ý để cho phép chọn nhiều file thì input file phải có thuộc tính multiple="true".

<form method="post" enctype="multipart/form-data">
      <input id="file_upload" name="file_upload" type="file" multiple="true">
</form>

Tiếp theo chúng ta sẽ có một đoạn mã tích hợp uploadfifive vào ứng dụng.

<script type="text/javascript">
	<?php $timestamp = time();?>
	$(function() {
		$('#file_upload').uploadifive({
			formData     : {
				'timestamp' : '<?php echo $timestamp;?>',
				'token'     : '<?php echo md5('unique_salt' . $timestamp);?>'
			},
			buttonText: 'Chọn file', 
			dropTarget: true, // Cho phép kéo thả
			fileSizeLimit: 0, // Limit size
			height: 30, // Chiều cao button
			awidth: 100, // Chiều rộng button
			method : 'post', // Phương thức truyền dữ liệu
			multi : true, // Cho phép upload nhiều file
			uploadLimit: 0,  // Số file tối đa mỗi lần upload
			fileType : '*.gif; *.jpg; *.png; *.doc; *.docx; *.xls; *.xlsx; *.pdf; *.zip; *.rar;',
			uploadScript : 'uploadifive.php' // File xử lý upload
		});
	});
</script>

Và có nhiều tùy chọn khác bạn có thể xem trong danh sách tùy chọn của uploadifive.

File uploadifive.php

Nội dung file này sẽ xử lý upload file phía server-side. Nếu bạn chưa thực sự lắm rõ kiến thức về upload file trong ứng dụng thì bạn có thể xem lại bài viết Upload file trong PHP.

$targetFolder = '/uploads'; // Thư mục chứa file upload
$verifyToken = md5('unique_salt' . $_POST['timestamp']);
if (!empty($_FILES) && $_POST['token'] == $verifyToken) {
	$tempFile = $_FILES['Filedata']['tmp_name'];
	$targetPath = dirname(__FILE__) . $targetFolder;
	$targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];
	
	// Kiểm tra danh sách loại file có hợp lệ
	$fileTypes = array('jpg','jpeg','gif','png','doc', 'docx');
	$fileParts = pathinfo($_FILES['Filedata']['name']);
	// Upload file
	if (in_array($fileParts['extension'],$fileTypes)) {
		@move_uploaded_file($tempFile,$targetFile);
		echo 'Upload thành công !';
	} else {
		echo 'Loại file không hợp lệ.';
	}
}

Kết luận.

Để có thể hiểu rõ hơn các bạn có thể tải code mẫu của mình viết. Uploadifive là một mã nguồn hỗ trợ tích hợp Upload cho các ứng dụng website của bạn rất hoàn hảo. Hiện nay đã có rất nhiều ứng dụng đang sử dụng và tích hợp công cụ này vào ứng dụng web của mình bởi tính tùy biến cao của nó. Với bài viết này của mình chắc chắn các bạn sẽ không cần phải tìm một tiện ích hỗ trợ khác nữa.