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é.