Kéo thả file upload sử dụng HTML5 và jquery

File upload with progress bar

Bài viết sẽ hướng dẫn bạn cách thực hiện việc kéo thả file upload thật đơn giản như một số website lớn chỉ với vài bước đơn giản. Hệ thống này làm bằng HTML5 và jquery, hy vọng nó có thể làm giàu cho ứng dụng upload file lên server của bạn.

Hệ thống hoạt động với hầu hết các trình duyệt phổ biến bây giờ như Chrome, Firefox, Safari…File upload có sử dụng một số thứ viện của jquery như pokies in australia target=”_blank”>Form data và File Reader
Bắt tay vào việc thôi nào!
Javascript Code
Dưới đây là tất cả những gì bạn cần phải làm để thêm jquery vào hệ thống của mình
[javascript]
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/multiupload.js"></script>
<script type="text/javascript">
var config = {
// Valid file formats
support : "image/jpg,image/png,image/bmp,image/jpeg,image/gif",
form: "demoFiler", // Form ID
dragArea: "dragAndDropFiles", // Upload Area ID
uploadUrl: "upload.php" // Server side file url
}
//Initiate file uploader.
$(document).ready(function()
{
initMultiUploader(config);
});
</script>
[/javascript]
Upload.php
Đoạn mã bên dưới cho phép bạn upload file lên server.
[PHP]
if($_SERVER[“REQUEST_METHOD”] == "POST")
{
if(move_uploaded_file($_FILES[“file”][“tmp_name”], "uploads/".$_FILES[“file”][“name”]))
{
echo($_POST[“index”]); // to validate
}
exit;
}
[/PHP]
HTML5
Đoạn mã html cho phép bạn kéo thả file để thực hiện upload
[PHP]
<div id="dragAndDropFiles" class="uploadArea">
<h1>Drop Images Here</h1>
</div>
<form name="demoFiler" id="demoFiler" enctype="multipart/form-data">
<input type="file" name="multiUpload" id="multiUpload" multiple />
<input type="submit" name="submitHandler" id="submitHandler" value="Upload" />
</form>
<div class="progressBar">
<div class="status"></div>
</div>
[/PHP]
OK! vậy là xong rồi đó, cùng chiêm ngưỡng thành quả thôi nào.

Download code

Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com