Hướng dẫn tạo upload file với jquery UploadFile. Như tiêu đề hôm nay codevivu sẽ hướng dẫn các bạn làm sao để tạo một form upload file bằng jquery UploadFile. Với đầy đủ các chức năng multiple upload, download , delete.
Đầu tiên chúng ta cần chuẩn bị bộ jquery bên dưới:
jquery UploadFile
UploadFile CSS
1. Chèn jquery vào HTML.
<!DOCTYPE html> <html lang=""> <head> <link href="uploadfile.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="jquery.uploadfile.js"></script> </head> <body> </body> </html>
2. Add thêm thẻ div vào body.
Chúng ta chèn vào thẻ body một thẻ div body và thêm vào một thuộc tính id với tên tùy chọn. Thuộc tính id này sẽ xử lý hiển thị Jquery upload file.
<div id="codevivu-uploader">Upload</div>
3. Khỏi tạo jquery UploadFile
Để hiển thị jquery UploadFile Chúng ta cần khởi tạo chúng bằng một đoạn mã Javascript
<script>
$(document).ready(function()
{
$("#codevivu-uploader").uploadFile({
url:"YOUR_FILE_UPLOAD_URL",
fileName:"INPUT_FILE_NAME"
});
});
</script>
Đến đây cơ bản chúng ta đã hiển thị được Form cung như giao diện upload. Giải thích thêm cho chúng ta.
– YOUR_FILE_UPLOAD_URL: đây sẽ là URL đến file xử lý upload phía server. Đối với những bạn nào dùng PHP thì chúng ta sẽ tạo đường dẩn tới file PHP cần xử lý upload.
– INPUT_FILE_NAME : Ở Đây chúng ta sẽ điền vào tên (name) của input file. Vì Jquery UploadFile sẽ tự render cho chúng một thẻ HTML input File với name = INPUT_FILE_NAME
<input name="INPUT_FILE_NAME" />
Và đựa vào INPUT_FILE_NAME chúng ta sẽ lấy được giá trị của form khi upload lên server. Chi tiết thế nào chúng ta cùng tiếp tục nhé.
Sao khi xong bước 3. Chúng ta sẽ được giao diện như hình bên dưới:
4. Tạo file xử lý upload lên server.
Như chúng ta đề cập ở bước 3. ở bước 4 này chúng ta sẽ đề cập đến YOUR_FILE_UPLOAD_URL và INPUT_FILE_NAME. tôi sẽ tạo một File có tên upload.php với nội dung như sau:
$output_dir = "uploads/";//Đường dẫn tới thư mục cần upload
//Chúng ta cần để thư mục với đường dẫn tương đối
if (isset($_FILES["INPUT_FILE_NAME "])) { //Kiểm tra xem bạn có chọn file để upload hay không với INPUT_FILE_NAME bạn sẽ khai báo ở bước 3
$ret = array(); //Khai báo một biến tạm kiễu Array lữu trữ file vừa upload.
$error = $_FILES["INPUT_FILE_NAME "]["error"]; // Khai báo một biến tạm kiễu Array lữu trữ lổi nếu xẩy ra lổi
if (!is_array($_FILES["INPUT_FILE_NAME "]["name"])) { //Kiểm tra trường hợp bạn upload đơn file
$fileName = $_FILES["INPUT_FILE_NAME "]["name"]; // lấy tên File
move_uploaded_file($_FILES["INPUT_FILE_NAME "]["tmp_name"], $output_dir.$fileName); //Upload file
$ret[]= $fileName; // Gán File vừa upload vào mãng luu trữ
} else { //Kiểm tra trường hợp bạn upload nhiều file
$fileCount = count($_FILES["INPUT_FILE_NAME "]["name"]); // Đếm tổng số file upload
for ($i=0; $i < $fileCount; $i++) { // Do chúng ta up nhiều File nên chúng ta tạo một vòng lặp để xửa lý upload từ File một
$fileName = $_FILES["INPUT_FILE_NAME "]["name"][$i]; // lấy tên File thứ i
move_uploaded_file($_FILES["INPUT_FILE_NAME "]["tmp_name"][$i], $output_dir.$fileName); // Upload file thứ i
$ret[]= $fileName; // Gán File vừa upload vào mãng luu trữ
}
}
echo json_encode($ret); // return về dạn json mảng luu trữ file vừa upload.
}
5. Hiển thị chức năng Download/Delete và dragDrop
Sau khi làm xong bước 4 thì chúng ta đã hoàn thành xong chức năng chính là upload File rồi phải không nào. Tiếp theo chúng ta sẽ co rat nhiều chức năng phụ bên dưới chúng ta sẽ tìm hiểu sơ lược nhé.
Tạo chức năng Delete và Download
<script>
$(document).ready(function()
{
$("#codevivu-uploader").uploadFile({
url:"YOUR_FILE_UPLOAD_URL",
fileName:"INPUT_FILE_NAME",
dragDrop: true,
showDelete: true,
showDownload:true,
deleteCallback: function (data, pd) {
for (var i = 0; i < data.length; i++) {
$.post("YOUR_FILE_DELETE_URL", {op: "delete",name: data[i]},
function (resp,textStatus, jqXHR) {
//Show Message
alert("File Deleted");
});
}
pd.statusbar.hide(); //You choice.
},
downloadCallback:function(filename,pd) {
location.href="YOUR_FILE_DOWNLOAD_URL?filename="+filename;
}
});
});
</script>
YOUR_FILE_DELETE_URL : Sẽ là đường dẩn đến file xử lý chức năng delete. Tôi sẽ tạo vi vụ file delete.php có nội dung nhu sau.
$output_dir = "uploads/";
if (isset($_POST["op"]) && $_POST["op"] == "delete" && isset($_POST['INPUT_FILE_NAME'])) {
$fileName = $_POST['INPUT_FILE_NAME'];
$fileName = str_replace("..", ".", $fileName);//Kiểm tra trường hợp ai đó cố gắn upload ra ngoài thư mục Upload
$filePath = $output_dir. $fileName;
if (file_exists($filePath)) {
unlink($filePath);
}
echo "Deleted File ".$fileName."<br>";
}
YOUR_FILE_DOWNLOAD_URL: Sẽ là đường dẩn đến file xử lý chức năng downoad. Tôi sẽ tạo vi vụ file downoad.php có nội dung nhu sau:
if (isset($_GET['INPUT_FILE_NAME'])) {
$fileName=$_GET['INPUT_FILE_NAME'];
$fileName = str_replace("..", ".", $fileName);//Kiểm tra trường hợp ai đó cố gắn upload ra ngoài thư mục Upload
$file = $output_dir . $fileName;
$file = str_replace("..", "", $file);
if (file_exists($file)) {
$fileName =str_replace(" ", "", $fileName);
header('Content-Description: File Transfer');
header('Content-Disposition: attachment; filename='.$fileName);
header('Content-Transfer-Encoding: binary');
header('Expires: 0');
header('Cache-Control: must-revalidate');
header('Pragma: public');
header('Content-Length: ' . filesize($file));
ob_clean();
flush();
readfile($file);
exit;
}
}
Vậy là chúng ta đã hoàn thành thêm 2 chức năng mới là download và Delete rồi nhé. Vậy là cơ bản đã xong. Chưa hết đâu nhé đã chia sẽ thì sẻ chia sẽ tận cùng nha hihi!
Ngoài các lựa chọn thuộc thính trên của Jquery UploadFile. Mình sẽ giới thiệu cho các bạn biết thêm về một số API và thuộc tính mà Jquery UploadFile hổ trợ nhé.
Cú pháp sử dụng của Jquery UploadFile cơ bản nhu sau chúng ta sẽ sử dụng chúng cho các thuộc tính tiếp theo nhé nên các bạn lưu ý:
Khởi tạo
var uploader = $("#codevivu-uploader").uploadFile(thuộc tính);
Hàm startUpload()
Khi chúng ta gọi hàm này thì form upload sẽ xử lý upload file lên server.
var uploader.startUpload();
Hàm stopUpload()
Khi chúng ta gọi hàm này thì form upload sẽ ngừng xử lý upload file lên server.
var uploader.stopUpload();
Hàm cancelAll()
Khi chúng ta gọi hàm này thì form upload sẽ ngừng tất cả xử lý upload file lên server.
var uploader.cancelAll();
Hàm remove()
Khi chúng ta gọi hàm này thì form upload sẽ ngừng hoạt động và remove khỏi trang
var uploader.remove();
Hàm reset()
Khi chúng ta gọi hàm này thì form upload sẽ được khởi tạo lại.
var uploader.reset(); uploader.reset(false);//trường hợp chúng ta goi reset(false) Form upload chĩ khởi tạo duy nhất process bar.
Hàm getResponses()
Khi chúng ta gọi hàm này chúng ta sẽ nhận được thông tin được trả về từ server.
var uploader.getResponses();
Tùy Chọn formData
Khi chúng ta thêm tùy chọn này các đối tượng được khái báo sẽ được form upload sẽ gữi lên server.
formData: { key1: 'value1', key2: 'value2' }
Tùy Chọn sequential
Khi chúng ta thêm tùy chọn này nhằm giúp ta giới hạn được số file tuần tự được tải lên
sequential:true, sequentialCount:1
Tùy Chọn maxFileSize
Khi chúng ta thêm tùy chọn này nhằm giúp ta giới hạn được dung lượng của một file cần tải lên được tính theo byte.
maxFileSize:5000000,// 5M
Tùy Chọn maxFileCount
Khi chúng ta thêm tùy chọn này nhằm giúp ta giới hạn được số lượng file được tải lên.
maxFileCount:10,// 10 Files
Tùy Chọn allowedTypes
Khi chúng ta thêm tùy chọn này nhằm giúp ta nói cho server biết chúng chỉ chấp nhận các tập tin có tên mở rộng mà ta khai báo.
allowedTypes:"jpg,png,gif,mp4,avi,flv",
Tùy Chọn multiple
Có hoặc không cho chọn upload nhiều file.
multiple:true, //true/false
Tùy Chọn dragDrop
Có hoặc không cho kéo thả file.
dragDrop:true, //true/false
Tùy Chọn autoSubmit
Có hoặc không cho tự động upload khi chon file.
autoSubmit:true, //true/false
Tùy Chọn showPreview
Có hoặc không cho hiển thị file preview khi upload.
showPreview:true, //true/false
Một Số Hàm Xử Lý Sự Kiện
onLoad:function(obj){
//nội dung thực thi
}
============>
onSelect:function(files)
{
files[0].name;
files[0].size;
return true;
}
===========>
onSubmit:function(files)
{
//files : danh sách file
//return flase; Ngừ upload
}
===========>
onSuccess:function(files,data,xhr,pd)
{
//files: danh sách file
//data: phản hồi từ server
}
===========>
afterUploadAll:function(obj)
{
//Nội dung cần thực thi
}
Lời Kết: hy vọng bài viết này giúp các bạn có thể thực hiện cho mình chức năng upload tùy mục đích của mình.
Trong bài viết nếu có vấn đề nào chưa hiểu các bạn có thể comment bên giới mình sẽ giải đáp cho các bạn vì bản thân mình cũng muốn giao lưu học hỏi mà hi hi!. Chúc các bạn thành công nhé.
