Như các bạn đã biết thì hầu như một website cơ bản nào cũng đều không thể thiếu chức năng Upload file, nhất là upload file ảnh, file document…v..v… Bài viết này sẽ hướng dẫn chi tiết các bạn code một chức năng Upload File đơn giản và cơ bản nhất có thể. Đương nhiên có cơ bản sẽ có nâng cao rồi.
Kiến thức cần có
Để upload file được thì chúng ta cần phải sử dụng biến $_FILES để nhận dữ liệu file gửi lên từ Server.
Cụ thể biến $_FILES được sử dụng như sau: $_FILES["nameInputFile"]["properties"]
Trong đó:
- nameInputFile: là tên của input với type là file
- properties: là tên thuộc tính mà PHP cung cấp cho chúng ta bao gồm 5 thuộc tính:
- name: Tên của file khi upload lên
- type: Kiểu file khi upload (VD: file ảnh loại .gif, .png, .jpg,…v…v…)
- tmp_name: Đường dẫn tạm của file khi upload
- error: Trạng thái lỗi khi upload. 0 là không có lỗi còn các lỗi khác các bạn có thể tham khảo thêm sau nhé
- size: Dung lượng file khi upload lên được tính bằng đơn vị bytes
Trong bài viết cơ bản này, mình sẽ chỉ cần sử dụng đến các thuộc tính name, tmp_name, error của biến $_FILES là đã có thể làm ra được chức năng upload file đơn giản rồi.
Code form upload file
Form chỉ upload từng file 1, ở bài nâng cao sẽ có phương pháp upload nhiều file cùng một lúc, cũng khá đơn giản thôi là chúng ta sẽ sử dụng mảng để có thể tương tác với nhiều file hơn khi upload.
Trên thẻ <form> mình cần lưu ý những thứ sau:
- Ở đây mình sử dụng action đến file
upload_file.php(code html + php mình để trong 1 file này) để submit form ngay tại trong file upload_file.php hiện tại luôn. Các bạn có thể tạo một file php khác và cho code php vào đấy để submit form lên cũng được. - Lưu ý là phải sử dụng method là POST nhé.
- Một thứ quan trọng nữa là phải có đoạn này
enctype="multipart/form-data"
<!--- BEGIN FORM UPLOAD FILES --->
<form action="upload_file.php" method="post" enctype="multipart/form-data">
<div class="form-group">
<label class="label-control col-xl-8">Upload file: </label>
<div class="col-xl-10">
<input type="file" id="txtFile" name="txtFile" class="form-control"/>
</div>
</div>
<div class="form-group">
<div class="col-xl-10">
<input type="submit" value="Upload now" name="btnSubmit" class="btn btn-primary" />
</div>
</div>
</form>
<!--- END FORM UPLOAD FILES --->Code xử lý khi upload file
Chú thích:
- Sử dụng biến
$target_dir = './uploads/'để thiết lập nơi lưu file ở đây mình có một thư mục tên là uploads. - Sử dụng biến
$file_name = $_FILES["txtFile"]["name"]để lưu tên của file được chọn trên input file.
<!--- BEGIN CODE HANDLE UPLOAD FILE --->
<?php
if(isset($_POST["btnSubmit"])) {
$target_dir = './uploads/'; //Set target directory to save file
$file_name = "";
if(isset($_FILES["txtFile"])) {
$file_name = $_FILES["txtFile"]["name"]; //Set file name to variable $file_name
if($_FILES["txtFile"]["error"] > 0) { //Check error
echo 'Sorry, there was an error uploading your file';
} else {
//Here code upload file to server
move_uploaded_file($_FILES["txtFile"]["tmp_name"], $target_dir . $file_name);
echo "File " . basename($file_name) . " has been uploaded!";
}
}
}
?>
<!--- END CODE HANDLE UPLOAD FILE --->Tổng hợp lại chúng ta đã có được một chức năng upload file đơn giản
Code dưới bao gồm HTML và PHP luôn nhé các bạn. Ở đây mình nhúng bootstrap vào ở múa cho đẹp lên cho dễ nhìn vì vậy các bạn có thể bỏ qua việc nhúng bootstrap nếu cảm thấy không cần thiết.
Trong code dưới mình có comment code để các bạn có thể hình dung code cho dễ hiểu hơn.
Ngoài ra, các bạn có thể nhúng bootstrap vào mà không cần phải download về bằng cách sử dụng CDN nhé. Các bạn lên google và search từ khóa cdn bootstrap và copy link cdn đấy đem về và pastse vào là OK.
<html>
<head>
<title>Upload file đơn giản</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
</head>
<body>
<div class="container">
<h1 class="text-center">Upload file đơn giản - Cơ bản</h1>
<div class="row">
<!--- BEGIN FORM UPLOAD FILES --->
<form action="upload_file.php" method="post" enctype="multipart/form-data">
<div class="form-group">
<label class="label-control col-xl-8">Upload file: </label>
<div class="col-xl-10">
<input type="file" id="txtFile" name="txtFile" class="form-control"/>
</div>
</div>
<div class="form-group">
<div class="col-xl-10">
<input type="submit" value="Upload now" name="btnSubmit" class="btn btn-primary" />
</div>
</div>
</form>
<!--- END FORM UPLOAD FILES --->
</div>
</div>
<div id="result">
<div class="container">
<!--- BEGIN CODE HANDLE UPLOAD FILE --->
<?php
if(isset($_POST["btnSubmit"])) {
$target_dir = './uploads/'; //Set target directory to save file
$file_name = "";
if(isset($_FILES["txtFile"])) {
$file_name = $_FILES["txtFile"]["name"]; //Set file name to variable $file_name
if($_FILES["txtFile"]["error"] > 0) { //Check error
echo 'Sorry, there was an error uploading your file';
} else {
//Here code upload file to server
move_uploaded_file($_FILES["txtFile"]["tmp_name"], $target_dir . $file_name);
echo "File " . basename($file_name) . " has been uploaded!";
}
}
}
?>
<!--- END CODE HANDLE UPLOAD FILE --->
</div>
</div>
</body>
</html>Kết luận
Chức năng này khá đơn giản, nó có thể có ích cho những bạn mới học hoặc đang tìm hiểu về chức năng upload file của PHP. Chức năng cần phải bổ sung và đáp ứng các yêu cầu cần thiết khác như: upload file với tên file theo ý muốn của mình như thế nào? loại file cần upload là gì? dung lượng upload tối đa là bao nhiêu? hay là kiểm tra xem file đã tồn tại hay chưa chẳng hạn?…v…v…. Tuy chưa phải là chức năng upload file đầy đủ nhưng bù lại hiện nó khá đơn giản và dễ sử dụng nữa.
Tổng kết lại là ở bài sau chúng ta sẽ tiếp tục nâng cấp chức năng upload này lên một cấp độ nâng cao hơn và đầy đủ chức năng hơn.
