Bước 1: Chuẩn bị cấu trúc các file và thư mục như sau
├── index.html
├── upload.php
├── uploads/
├── js/
│ └── jquery.min.js
├── css/
│ └── style.css
└── images/
– File index.html để hiển thị form chọn file và hiển thị tiến trình upload
– File upload.php để xử lý lưu trữ file trên server
– Thư mục uploads/ để lưu trữ file
– Thư mục js/ chứa các file .js
– Thư mục css/ chứa các file định dạng .css
– Thư mục images/ chứa file ảnh hiển thị trên giao diện của ứng dụng
Bước 2: Trong file index.html
Thêm code hiển thị form để chọn file
<!-- File upload form -->
<form id="uploadForm" enctype="multipart/form-data">
<label>Choose File:</label>
<input type="file" name="file" id="fileInput">
<input type="submit" name="submit" value="UPLOAD"/>
</form>
Thêm đoạn code hiển thị thanh tiến trình
<!-- Progress bar -->
<div class="progress">
<div class="progress-bar"></div>
</div>
Tiếp theo là thêm đoạn code hiển thị trạng thái kết quả upload
<!-- Display upload status -->
<div id="uploadStatus"></div>
Và nhúng thư viện jquery vào để upload
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
Code phần xử lý javascript
<script>
$(document).ready(function(){
// File upload via Ajax
$("#uploadForm").on('submit', function(e){
e.preventDefault();
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = ((evt.loaded / evt.total) * 100);
$(".progress-bar").width(percentComplete + '%');
$(".progress-bar").html(percentComplete+'%');
}
}, false);
return xhr;
},
type: 'POST',
url: 'upload.php',
data: new FormData(this),
contentType: false,
cache: false,
processData:false,
beforeSend: function(){
$(".progress-bar").width('0%');
$('#uploadStatus').html('<img src="images/loading.gif"/>');
},
error:function(){
$('#uploadStatus').html('<p style="color:#EA4335;">Lỗi upload???</p>');
},
success: function(resp){
if(resp == 'ok'){
$('#uploadForm')[0].reset();
$('#uploadStatus').html('<p style="color:#28A74B;">Upload thành công!</p>');
}else if(resp == 'err'){
$('#uploadStatus').html('<p style="color:#EA4335;">Chưa chọn file upload hoặc file không hợp lệ</p>');
}
}
});
});
// File type validation
$("#fileInput").change(function(){
var allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.ms-office', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'image/jpeg', 'image/png', 'image/jpg', 'image/gif'];
var file = this.files[0];
var fileType = file.type;
if(!allowedTypes.includes(fileType)){
alert('Please select a valid file (PDF/DOC/DOCX/JPEG/JPG/PNG/GIF).');
$("#fileInput").val('');
return false;
}
});
});
</script>
Bước 3: Viết code phần server upload.php
<?php
$upload = 'err';
if(!empty($_FILES['file'])){
// Thiết lập lựa chọn thư mục và kiểu file được phép upload
$targetDir = "uploads/";
$allowTypes = array('pdf', 'doc', 'docx', 'jpg', 'png', 'jpeg', 'gif');
$fileName = basename($_FILES['file']['name']);
$targetFilePath = $targetDir.$fileName;
// Kiểm tra kiểu file hợp lệ hay không
$fileType = pathinfo($targetFilePath, PATHINFO_EXTENSION);
if(in_array($fileType, $allowTypes)){
// Di chuyển file đã upload vào thư mục lưu trữ
if(move_uploaded_file($_FILES['file']['tmp_name'], $targetFilePath)){
$upload = 'ok';
}
}
}
echo $upload;
?>
Cuối cùng là chạy và thử nghiệm.
Lưu ý: Code trên chỉ là demo đơn giản, một số tình huống bắt lỗi hay tùy biến khác bạn tự tùy chỉnh nhé.