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
    
	
        body{
			text-align:center;
		}
	
  
  
    
File type validation while uploading using JavaScript
  
    
Upload an image [.jpg,.jpeg,.png,.gif]

	
    
	



	
    Upload
     
    

	/* 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{
			var filename = files[0].name;

			/* getting file extenstion eg- .jpg,.png, etc */
			var extension = filename.substr[filename.lastIndexOf["."]];

			/* define allowed file types */
			var allowedExtensionsRegx = /[\.jpg|\.jpeg|\.png|\.gif]$/i;

			/* testing extension with regular expression */
			var isAllowed = allowedExtensionsRegx.test[extension];

			if[isAllowed]{
				alert["File type is valid for the upload"];
				/* file upload logic goes here.. */
			}else{
				alert["Invalid File Type."];
				return false;
			}
		}
	}
    
  

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;i