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

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)

	
    
	



	
    Upload
     
    
  

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 được xác định để gọi hàm validateFileType() trong sự kiện nhấp chuột để xác thực loại tệp trước khi tải lên
• Bên trong validateFileType(), nhận inputElement bằng cách gọi hàm javascript getElementById()
• Sử dụng yếu tố đầu vào. tệp, lấy đối tượng tệp
• Sử dụng tập tin. độ dài, kiểm tra xem người dùng đã chọn bất kỳ tệp nào hay chưa
• Sử dụng tệp[0]. tên, lấy tên của tệp có phần mở rộng (ví dụ: wallpager. png)
• Xác định biến biểu thức chính quy allowExtensionsRegx với các loại tệp được phép (. JPG,. JPEG,. PNG,. chỉ GIF)
• Sử dụng hàm

  /* 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;i0, kiểm tra loại tệp có được phép hay không. Nó trả về giá trị boolean đúng hoặc sai

Xem trước và Demo 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;i2. 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;i2 đượ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
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
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;i7 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

	
    
	



	
    Upload
     
    
  

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  được xác định để gọi hàm 
/* 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;i7 trong sự kiện nhấp chuột để xác thực kích thước tệp trước khi tải lên
Bên trong 
/* 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;i7, nhận inputElement bằng cách gọi hàm javascript getElementById()
Sử dụng yếu tố đầu vào. tệp, lấy đối tượng tệp
Sử dụng tập tin. độ dài, kiểm tra xem người dùng đã chọn bất kỳ tệp nào hay chưa
Sử dụng tệp[0]. kích thước, lấy kích thước của tệp ở định dạng byte
Tính kích thước tệp trong hình tròn bằng cách sử dụng hàm 

  

      
	
  
  
    
File size validation while uploading using JavaScript
  
    
Upload a file (size less than or equal to 2MB) only

	
    
	



	
    Upload
     
    
  

3 tính bằng MB
Kiểm tra dung lượng file có nhỏ hơn hoặc bằng 2MB hay không
Xem trước và Demo trực tiếp
Bản thử trực tiếp
Làm việc với nhiều tệp tải lên
Trong trường hợp này, khi chúng tôi được yêu cầu làm việc với nhiều tệp tải lên, chúng tôi có thể 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;i2. 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;i2 đượ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
2. ) Cần sửa đổi tiếp theo trong hàm 
/* 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;i7. Bên trong chức năng này, inputElement. files sẽ trả về đối tượng Array of files. Vì vậy, ở đây cũng vậy, 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 kích thước tệp từng cái một cho mỗi tệp
Xem hàm 
/* 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;i7 được sửa đổi bên dưới
/* javascript function to validate file size */ 
function validateFileSize() {
	var inputElement = document.getElementById('file-upload');
	var files = inputElement.files;
	if(files.length==0){
		alert("Please choose a file first...");
		return false;
	}

	/* iterating over the files array */
	for(var i=0; i
Phần kết luận
Trong bài viết này, bạn đã biết cách xác thực loại tệp và kích thước tệp trước khi tải tệp lên máy chủ. Bạn cũng đã học cách làm việc với xác thực tải lên nhiều tệp bằng Javascript
Ngoài ra, hãy tìm hiểu cách xác thực tệp tải lên bằng jQuery
Nếu bạn muốn tìm hiểu cách tải tệp lên máy chủ bằng xác thực tệp phía máy chủ trong Java, bạn có thể truy cập các liên kết bên dưới
 

Làm cách nào để xác thực tệp tải lên trong JavaScript?
Sử dụng JavaScript, bạn có thể dễ dàng kiểm tra phần mở rộng tệp đã chọn với các phần mở rộng tệp được phép và có thể hạn chế người dùng chỉ tải lên các loại tệp được phép. Đối với điều này, chúng tôi sẽ sử dụng hàm fileValidation() . Chúng tôi sẽ tạo hàm fileValidation() chứa mã xác thực loại tệp hoàn chỉnh. 
Làm cách nào để kiểm tra định dạng tệp CSV trong JavaScript?
Tệp CSV được chọn trong điều khiển FileUpload (Đầu vào tệp HTML) và nút Tải lên được nhấp và chức năng Tải lên JavaScript được gọi. Bên trong hàm, trước tiên, kiểm tra được thực hiện để xác minh xem tệp là tệp CSV hay tệp văn bản hợp lệ
Làm cách nào để kiểm tra xem một tệp có được chọn hay không trong JavaScript?
thuộc tính độ dài để kiểm tra tệp có được chọn hay không. nếu phần tử. các tập tin. thuộc tính độ dài trả về 0 thì tệp không được chọn nếu không thì tệp được chọn. 
Làm cách nào để xác thực nhiều tệp tải lên trong JavaScript?
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.  . 
 
An HTML  element is defined with attribute type=”file” to choose a file for uploading..
 
An HTML  element is defined to call the validateFileSize() function on click event to validate file size before uploading..