search

Chỉ tải lên xác thực tệp csv trong javascript

Hỏi lúc: 1 tháng trước
Trả lời: 0
Lượt xem: 71

Trong ứng dụng web, từ quan điểm bảo mật, xác thực tệp là tham số quan trọng nhất mà mỗi nhà phát triển cần xem xét, đặc biệt là khi thực hiện tải tệp lên. Xác thực có thể là phía máy khách hoặc phía máy chủ hoặc có thể là cả hai

Show

Bài viết này hướng dẫn bạn cách xác thực Loại tệp (Phần mở rộng) và Kích thước tệp trước khi tải tệp lên máy chủ. Phần trình diễn này sẽ được hiển thị để xác thực phía máy khách bằng javascript

Mục lục

Xác thực Loại tệp (Phần mở rộng)

Sử dụng Javascript, chúng tôi có thể dễ dàng xác thực loại tệp bằng cách trích xuất phần mở rộng tệp với các loại tệp được phép

Ví dụ về xác thực loại tệp

Dưới đây là ví dụ mẫu để xác thực loại tệp. Trong ví dụ này, chúng tôi tải lên các tệp có phần mở rộng. jpeg/. jpg/. png/. chỉ gif. Chúng ta sẽ định nghĩa một hàm javascript validateFileType() sẽ được gọi khi nhấp vào nút tải lên


                          
File type validation while uploading using JavaScript

                          
Upload an image (.jpg,.jpeg,.png,.gif)


                          

                           
                          
                          

                          

                            
Có thể bạn quan tâm

                            
                          

                          

                             
                            
                          

                          

                          
Hãy hiểu cách triển khai mã trên với các điểm mẫu

                          
    
                            
  • Một phần tử HTML  được xác định với thuộc tính type=”file” để chọn tệp để tải lên
    • 
                            
  • Phần tử HTML  
    • 
                            
    • 
                            
    • 
                            
    • 
                            
    • 
                            
    • 
                            
  • 
                              
                              
    
                            
    • 
                          

                          

                          

                            
                          
Bản thử trực tiếp
                          
Làm việc với nhiều tệp tải lên

                          
Đôi khi, dựa trên yêu cầu của dự án, chúng tôi yêu cầu nhiều tệp tải lên cùng một lúc. Kịch bản này có thể được xử lý dễ dàng với một vài sửa đổi trong ví dụ mẫu ở trên

                          
Hãy hiểu việc sửa đổi mã cần thiết

                          
1. ) Trong phần tử HTML , hãy thêm thuộc tính

                          
/* javascript function to validate file type */
function validateFileType() {
        var inputElement = document.getElementById('file-upload');
        var files = inputElement.files;
        if(files.length==0){
                alert("Please choose a file first...");
                return false;
        }else{

                /* iterating over the files array */
                for(var i=0;i< pre>2. Thuộc tính 

                          
/* javascript function to validate file type */
function validateFileType() {
        var inputElement = document.getElementById('file-upload');
        var files = inputElement.files;
        if(files.length==0){
                alert("Please choose a file first...");
                return false;
        }else{

                /* iterating over the files array */
                for(var i=0;i< pre>2 được sử dụng để cho phép chọn nhiều tệp cùng một lúc

Xem hình ảnh dưới đây để hiểu làm thế nào nó có thể được thêm vào một phần tử  HTML

                          
Chỉ tải lên xác thực tệp csv trong javascript

                          

2. ) Cần sửa đổi tiếp theo trong hàm validateFileType(). Bên trong chức năng này, inputElement. files sẽ trả về đối tượng Array of files. Vì nó là một Mảng, chúng ta có thể lặp lại nó thông qua một vòng lặp for và xác thực từng loại tệp cho từng tệp
Xem hàm validateFileType() được sửa đổi bên dưới

                          

                             
                            
                          

                          


                          
/* javascript function to validate file type */
function validateFileType() {
        var inputElement = document.getElementById('file-upload');
        var files = inputElement.files;
        if(files.length==0){
                alert("Please choose a file first...");
                return false;
        }else{

                /* iterating over the files array */
                for(var i=0;i< pre>

                          
Xác thực kích thước tệp

                          

Kích thước của tệp tải lên cũng có thể được xác thực dễ dàng trong javascript

                          
Ví dụ về xác thực kích thước tệp

                          

Dưới đây là ví dụ mẫu để xác thực kích thước tệp. Trong ví dụ này, chúng tôi chỉ tải lên các tệp có kích thước nhỏ hơn hoặc bằng 2MB. Chúng ta sẽ định nghĩa một hàm javascript 

                          
/* javascript function to validate file type */
function validateFileType() {
        var inputElement = document.getElementById('file-upload');
        var files = inputElement.files;
        if(files.length==0){
                alert("Please choose a file first...");
                return false;
        }else{

                /* iterating over the files array */
                for(var i=0;i< pre>7 sẽ được gọi khi nhấp vào nút tải lên

                          

                          
File size validation while uploading using JavaScript

                          
Upload a file (size less than or equal to 2MB) only


                          

                           
                          
                          

                          
Hãy hiểu cách triển khai mã trên với các điểm mẫu