Mẫu tải lên tập tin html

Tệp tải lên là một chức năng rất phổ biến trong các trang web hiện nay, ví dụ như tải lên tệp hình ảnh đại diện cho người dùng, hay tải lên tệp hình ảnh cho sản phẩm, hay tải lên video/nhạc cho các trang web đa phương tiện, tải lên tệp tài nguyên

Chúng ta có thể sử dụng HTML và JAVASCRIPT để cho phép người dùng tải lên tệp từ máy tính/điện thoại, kiểm tra tệp (xác thực) và tiến hành tải tệp lên máy chủ bằng AJAX

Việc xử lý tệp tải lên bằng javascript sẽ mang lại nhiều lợi ích như

- Tăng trải nghiệm người dùng

- Download for server

Chi tiết các lợi ích này mình sẽ trình bày sau. Bây giờ chúng ta sẽ đi vào chi tiết cách tạo chức năng upload file bằng javascript. Bạn nào hóng code mẫu thì mình có link tải code nguồn tham khảo phía cuối bài viết

Yêu cầu chức năng upload file

Trong phạm vi bài hướng dẫn này, mình sẽ trình bày chức năng tải lên tệp hình ảnh với các chức năng như sau

- Hiển thị biểu mẫu tải lên hình ảnh bao gồm hình ảnh xem trước, nút "chọn hình", nút "gửi"

- Khi chọn tệp hình ảnh, tiến trình cập nhật hình ảnh xem trước, hiển thị các thông số của hình ảnh bao gồm. file name, format, dung lượng

- Chỉ cho phép tải lên hình ảnh với định dạng PNG và JPG

- Giới hạn dung lượng file ảnh là 30MB

- Kiểm tra tệp nội dung có thực sự là hình ảnh hợp lệ hay không

- Khi nhấn nút "gửi", tiến trình gửi tệp nội dung cấu hình tới địa chỉ URL được xác định thông tin chỉ qua AJAX và thông báo kết quả của việc tải tệp lên trình duyệt

Các yêu cầu phía trên chỉ mang tính tham khảo, các bạn có thể tùy chỉnh để phù hợp với dự án

Tiến hành thiết kế giao diện tải lên tệp hình ảnh bằng HTML và CSS

Tạo thư mục mới với các tệp như hình bên dưới

Open file index. html by any thảo luận code bất kỳ, nhập nội dung như sau

    
        Upload file bằng javascript
        
        
        
    
    
        
            

                

                    

                

                

                    
                    Chọn Hình
                    Gửi
                
                
                

                    

                        Tên file: 
                        ----
                    
                    

                        Định dạng: 
                        ----
                    
                    

                        Dung lượng: 
                        ----
                    
                

            

        
        
    

Open file index. css bằng bất kỳ trình soạn thảo mã bất kỳ, nhập nội dung như sau

*{
    padding: 0px;
    margin: 0px;
    font-family: sans-serif;
    box-sizing: border-box;
}
main{
    background-color: #dddddd;
    min-height: 300px;
    padding: 7.5px 15px;
}
.container{
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.imageUploadContainer{
    text-align: center;
}
.imageUpload{
    margin-top: 20px;
    padding: 7.5px 0;
}
.fileInfomation{
    margin-top: 20px;
}
#imageUploadInput{
    display: none;
}
#imagePreview{
    max-width: 100%;
    max-height: 700px;
}
#imageUploadInputBtn,
#sendData{
    display: inline-block;
    padding: 7.5px 15px;
    background-color: #0099cc;
    color: #ffffff;
    cursor: pointer;
    border-radius: 5px;
}

Open file index. html trên trình duyệt, chúng ta sẽ thấy giao diện như hình

Viết code javascript xử lý upload file

Theo như các yêu cầu đã đặt ra phía trên, chúng ta tiến hành viết mã javascript cho tệp chỉ mục. js as after

(function () {
    var imageUpload = function () {
        var self = this;
        this.selector = {
            fileInput: document.getElementById('imageUploadInput'),
            fileInputBtn: document.getElementById('imageUploadInputBtn'),
            imagePreview: document.getElementById('imagePreview'),
            status: document.getElementById('uploadFileStatus'),
            sendBtn: document.getElementById('sendData'),
            infoName: document.getElementById('fileInfomation_name'),
            infoType: document.getElementById('fileInfomation_type'),
            infoSize: document.getElementById('fileInfomation_size')
        };
        this.imageData = "";
        this.fileTypes = ['image/png', 'image/jpeg'];
        this.maxSize = 30 * 1024 * 1024; // 30MB
        this.uploadUrl = 'https://tutrithuc.com/TestAPI/imageUpload';
        this.onChangeInput = function (e) {
            // Reset file data / image preview
            self.selector.status.innerHTML = '';
            self.selector.imagePreview.setAttribute('src', "img/default.jpg");
            self.imageData='';
            
            // Get the current file upload
            var file = e.target.files[0];
            this.selector.infoName.innerHTML = file.name;
            this.selector.infoType.innerHTML = file.type;
            this.selector.infoSize.innerHTML = file.size + " bytes"; // in bytes

            // Validate file type
            if (this.fileTypes.indexOf(file.type) == -1) {
                self.selector.status.innerHTML = "File không hợp lệ (chỉ file hình jpg và hình png được chấp nhận)";
                return;
            }
            
            // Validate file size
            if (file.size > this.maxSize) {
                self.selector.status.innerHTML = "Dung lượng file vượt quá giới hạn (tối đa 30MB được chấp nhận)";
                return;
            }

            var reader = new FileReader();
            reader.onload = function (e) {
                self.imageData = e.target.result;
                
                // Validate file content
                self.selector.imagePreview.onerror = function(){
                    self.imageData = "";
                    self.selector.imagePreview.setAttribute('src', "img/default.jpg");
                    self.selector.status.innerHTML = 'Nội dung hình không hợp lệ';
                };
                self.selector.imagePreview.setAttribute('src', self.imageData);
            };
            reader.readAsDataURL(file);
        };
        this.sendData = function () {
            // Validate when file content is empty
            if (this.imageData == ""){
                self.selector.status.innerHTML = 'Vui lòng chọn hình để tải lên';
                return;
            }
            
            // Prevent double click
            var data = {
                'imageData': this.imageData
            };
            this.imageData = "";
            
            var request = new XMLHttpRequest();
            request.open("POST", this.uploadUrl);
            request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
            request.onreadystatechange = function () {
                if (this.readyState === 4 && this.status === 200) {
                    self.selector.status.innerHTML = "Upload thành công";
                } else {
                    console.log(this.responseText);
                    self.selector.status.innerHTML = "Đã có lỗi xảy ra, không upload được hình";
                }
            };

            // Send request to server
            request.send(JSON.stringify(data));
        };

        /*
         * Event trigger
         */
        this.selector.fileInput.addEventListener('change', function (e) {
            self.onChangeInput(e);
        });
        this.selector.fileInputBtn.addEventListener('click', function () {
            self.selector.fileInput.click();
        });
        this.selector.sendBtn.addEventListener('click', function () {
            self.sendData();
        });
    };
    window.addEventListener("DOMContentLoaded", function () {
        console.log('DOM is loaded');
        new imageUpload();
    });
})();

Mình sẽ diễn giải cách sử dụng và cấu trúc file index. js ngay bên dưới

Kiểm tra hoạt động của chức năng tải lên hình ảnh bằng javascript

Tải lại chỉ mục tệp. html đang mở trên trình duyệt, bây giờ chúng ta có thể sử dụng chức năng tải lên hình ảnh theo đúng yêu cầu đã đặt ra

Love 1. Load image to public

1. Nhấn vào nút "Chọn hình".  
2. Tìm và chọn một tấm hình (. JPG) with dung lượng nhỏ hơn 30MB
3. Kiểm tra xem trước hình ảnh và các thông số của cấu hình vừa tải lên

Và đây là hình ảnh kết quả mà mình đã thực hiện

love 2. Định dạng tệp tải lên không phải là JPG / PNG

1. Nhấn vào nút "Chọn hình".  
2. Tìm và chọn một tệp có định dạng không hợp lệ
   • File image with GIF format
   • tập tin pdf
   • tập tin từ
   • Tệp nhạc
   • Tệp HTML
   • ...
3. Kiểm tra xem trước hình ảnh (được đặt lại về hình mặc định) và các thông số của hình vừa tải lên

Và đây là kết quả khi mình chọn tải lên một tệp HTML

love 3. Nội dung tệp tải lên không phải là tệp ảnh hợp lệ

1. Nhấn vào nút "Chọn hình".  
2. Tìm và chọn một tệp không phải là hình ảnh hợp lệ (tệp ảnh SVG được đổi tên thành "abc. jpg")
3. Kiểm tra xem trước hình ảnh (được đặt lại về hình mặc định) và các thông số của hình vừa tải lên

Và đây là kết quả khi mình chọn tải lên một tệp SVG nhưng đã bị đổi tên thành "52498. jpg"

Các bạn có thể tự kiểm tra thêm các tình huống khác nhé

Diễn giải cách hoạt động xử lý tải tệp lên bằng javascript

- Trước tiên, chúng ta sử dụng thẻ input với type="file" để cho phép người dùng có thể chọn duyệt tệp bằng máy tính hoặc điện thoại di động. Tuy nhiên, chúng tôi sẽ ẩn đầu vào thẻ này đi và hiển thị một nút nhấn thay thế, chúng tôi sẽ bắt sự kiện khi người dùng nhấn vào nút nhấn, thì sẽ sử dụng javascript gọi sự kiện nhấp cho đầu vào thẻ

Trích dẫn chỉ mục tệp. html

Chọn Hình

Trích dẫn chỉ mục tệp. css

#imageUploadInput{
    display: none;
}

Trích dẫn chỉ mục tập tin. js

(function () {
    var imageUpload = function () {
        var self = this;
        this.selector = {
            fileInput: document.getElementById('imageUploadInput'),
            fileInputBtn: document.getElementById('imageUploadInputBtn')
        };

        /*
         * Event trigger
         */
        this.selector.fileInputBtn.addEventListener('click', function () {
            self.selector.fileInput.click();
        });
    };
    window.addEventListener("DOMContentLoaded", function () {
        console.log('DOM is loaded');
        new imageUpload();
    });
})();

Tiếp theo, chúng ta tiến hành bắt sự kiện thay đổi của đầu vào tệp thẻ, gọi hàm onChangeInput() để đọc và xử lý dữ liệu

Trích dẫn chỉ mục tập tin. js

(function () {
    var imageUpload = function () {
        var self = this;
        this.selector = {
            fileInput: document.getElementById('imageUploadInput'),
            fileInputBtn: document.getElementById('imageUploadInputBtn'),
            imagePreview: document.getElementById('imagePreview'),
            status: document.getElementById('uploadFileStatus'),
            sendBtn: document.getElementById('sendData'),
            infoName: document.getElementById('fileInfomation_name'),
            infoType: document.getElementById('fileInfomation_type'),
            infoSize: document.getElementById('fileInfomation_size')
        };
        this.imageData = "";
        this.fileTypes = ['image/png', 'image/jpeg'];
        this.maxSize = 30 * 1024 * 1024; // 30MB
        this.onChangeInput = function (e) {
            // Reset file data / image preview
            self.selector.status.innerHTML = '';
            self.selector.imagePreview.setAttribute('src', "img/default.jpg");
            self.imageData='';
            
            // Get the current file upload
            var file = e.target.files[0];
            this.selector.infoName.innerHTML = file.name;
            this.selector.infoType.innerHTML = file.type;
            this.selector.infoSize.innerHTML = file.size + " bytes"; // in bytes

            // Validate file type
            if (this.fileTypes.indexOf(file.type) == -1) {
                self.selector.status.innerHTML = "File không hợp lệ (chỉ file hình jpg và hình png được chấp nhận)";
                return;
            }
            
            // Validate file size
            if (file.size > this.maxSize) {
                self.selector.status.innerHTML = "Dung lượng file vượt quá giới hạn (tối đa 30MB được chấp nhận)";
                return;
            }

            var reader = new FileReader();
            reader.onload = function (e) {
                self.imageData = e.target.result;
                
                // Validate file content
                self.selector.imagePreview.onerror = function(){
                    self.imageData = "";
                    self.selector.imagePreview.setAttribute('src', "img/default.jpg");
                    self.selector.status.innerHTML = 'Nội dung hình không hợp lệ';
                };
                self.selector.imagePreview.setAttribute('src', self.imageData);
            };
            reader.readAsDataURL(file);
        };
        

        /*
         * Event trigger
         */
        this.selector.fileInput.addEventListener('change', function (e) {
            self.onChangeInput(e);
        });
    };
    window.addEventListener("DOMContentLoaded", function () {
        console.log('DOM is loaded');
        new imageUpload();
    });
})();

Mình có comment khá chi tiết trong hàm onChangeInput(). Có một số lưu ý sau

- Sử dụng đối tượng FileReader có sẵn để đọc tệp bằng javascript

- Trong bài hướng dẫn này, mình chỉ làm mẫu việc đọc 1 file, đọc nhiều file thì mình sẽ hướng dẫn trong các bài sau

var file = e.target.files[0];

- tập tin. size is to get dung lượng tính theo byte của object list item

- Nội dung cấu hình không hợp lệ có nghĩa là tệp với nội dung không hợp lệ với loại tệp tương ứng. Điều này xảy ra khi người dùng tải lên một tệp không phải là ảnh jpeg nhưng lại đặt tên tệp là "abc. jpg", tương tự đối với ảnh PNG

Sau khi đã đọc được tệp nội dung, chúng ta sử dụng hàm sendData() để gửi tệp nội dung tới máy chủ

Trích dẫn chỉ mục tập tin. js

Trong hàm sendData(), chúng ta có một số lưu ý

- Sử dụng AJAX gửi yêu cầu tới máy chủ

var request = new XMLHttpRequest();

- Khi gửi yêu cầu tới máy chủ, cần sử dụng javascript để tạo chuỗi JSON cho tham số truyền đi

*{
    padding: 0px;
    margin: 0px;
    font-family: sans-serif;
    box-sizing: border-box;
}
main{
    background-color: #dddddd;
    min-height: 300px;
    padding: 7.5px 15px;
}
.container{
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.imageUploadContainer{
    text-align: center;
}
.imageUpload{
    margin-top: 20px;
    padding: 7.5px 0;
}
.fileInfomation{
    margin-top: 20px;
}
#imageUploadInput{
    display: none;
}
#imagePreview{
    max-width: 100%;
    max-height: 700px;
}
#imageUploadInputBtn,
#sendData{
    display: inline-block;
    padding: 7.5px 15px;
    background-color: #0099cc;
    color: #ffffff;
    cursor: pointer;
    border-radius: 5px;
}

Lợi ích khi xử lý tệp tải lên bằng javascript

- Tăng trải nghiệm người dùng. Chúng ta sẽ kiểm tra định dạng tệp, dung lượng tệp để có thể đưa ra các thông báo lỗi ngay khi đọc xong tệp, người dùng sẽ không phải đợi cho đến khi tệp được tải lên máy chủ và mới thấy lỗi xảy ra. Hãy cấu hình, nếu người dùng tải lên một tệp video với dung lượng 4GB, quá trình tải lên máy chủ sẽ mất khoảng hơn 10 phút, sau khi chờ đợi, người dùng lại nhận được một thông báo rằng định dạng video không hợp lệ, . Bên cạnh đó, chúng tôi có thể hiển thị ngay tệp hình ảnh (hoặc video, nhạc) để người dùng xem trước, trước khi người dùng quyết định tải lên máy chủ, phần nào giúp người dùng yên tâm hơn rằng mình đã chọn đúng tệp

- Download for server. Tệp tải lên vẫn phải được kiểm tra lại phía máy chủ một lần nữa để đảm bảo an toàn. Do đó, việc giảm tải cho máy chủ không phải là không có? . Trong các trường hợp không thông thường, chẳng hạn như người dùng cố tình có thể thâm nhập vào javascript để vượt qua bước kiểm tra tệp tải lên, thì máy chủ mới đưa ra lỗi để đảm bảo an toàn

Thảo luận về xử lý upload file bằng javascript

Trên tinh thần xây dựng cùng phát triển, các bạn có ý kiến ​​hay đóng góp ý kiến ​​về bài hướng dẫn, vui lòng để lại bình luận bên dưới nhé

Code tham khảo chức năng upload file bằng javascript

Mã nguồn của bài hướng dẫn mình có thể tải lên Google Drive, bạn nào có nhu cầu có thể tải về tham khảo nhé