Làm cách nào để lấy phần mở rộng tệp trong JavaScript từ URL?

<input type="file" id="filepicker" name="fileList" multiple />
<output id="output">output>

output {
  display: block;
  white-space: pre-wrap;
}

const output = document.getElementById('output');
const filepicker = document.getElementById('filepicker');

filepicker.addEventListener('change', (event) => {
  const files = event.target.files;
  output.textContent = '';

  for (const file of files) {
    output.textContent += `${file.name}: ${file.type || 'unknown'}\n`;
  }
});

Ghi chú. Dựa trên triển khai hiện tại, các trình duyệt sẽ không thực sự đọc dòng phụ của tệp để xác định loại phương tiện của nó. Nó được giả định dựa trên phần mở rộng tệp; . txt sẽ cung cấp "văn bản/đơn giản" chứ không phải "hình ảnh/png". Ngoài ra, file.type thường chỉ đáng tin cậy đối với các loại tệp phổ biến như hình ảnh, tài liệu HTML, âm thanh và video. Các phần mở rộng tệp không phổ biến sẽ trả về một chuỗi trống. Cấu hình máy khách (ví dụ: Windows Registry) có thể dẫn đến các giá trị không mong muốn ngay cả đối với các loại phổ biến. Các nhà phát triển không nên dựa vào thuộc tính này như một lược đồ xác thực duy nhất

Để lấy phần mở rộng tệp trong Nút. js, bạn có thể sử dụng phương pháp extname() từ mô-đun tích hợp sẵn path

Đây là một ví dụ

const path = require('path')

path.extname('index.html') // .html
path.extname('name.png')   // .png
path.extname('name.of.months.pdf') // .pdf

Phương thức extname() trả về phần mở rộng đường dẫn đã cho từ lần xuất hiện cuối cùng của ký tự (dấu chấm)

output {
  display: block;
  white-space: pre-wrap;
}

Nếu không có

output {
  display: block;
  white-space: pre-wrap;
}

output {
  display: block;
  white-space: pre-wrap;
}

output {
  display: block;
  white-space: pre-wrap;
}

Nhận tiện ích mở rộng tệp đã tải lên trong Javascript. Trong một ứng dụng web, chúng tôi sử dụng thẻ biểu mẫu để lưu đầu vào của người dùng. Thẻ biểu mẫu chính chứa hộp văn bản, vùng văn bản và tệp đầu vào. i. e (tải tệp lên), v.v. Mặc dù dữ liệu nhập vào người dùng có thể tải lên bất kỳ định dạng tệp nào, vì vậy chúng tôi cần xác thực nó ở phía máy khách cũng như phía máy chủ. Chúng tôi với tư cách là nhà phát triển biết phần mở rộng tệp hoặc loại tệp nào sẽ được tải lên trên trang web tương ứng. Vì vậy, ở đây trong bài viết này sẽ tìm hiểu cách lấy phần mở rộng tệp đã tải lên trong javascript

Đối với điều đó, cần phải xác thực tệp và để làm được điều đó, chúng tôi cần biết phần mở rộng của tệp đã tải lên i. e liệu chúng tôi chỉ muốn tải lên tệp jpg hay tệp excel hay tệp CSV hay bất kỳ tệp có định dạng tiện ích mở rộng cụ thể nào khác. Ở đây trong bài viết này, chúng ta sẽ tìm hiểu cách lấy phần mở rộng tệp trong JavaScript (phía máy khách), để chúng ta có thể xác thực nó

Chúng tôi đang sử dụng 2 cách tiếp cận khác nhau để đạt được nó

Hai cách để có được phần mở rộng tập tin

1. Sử dụng Regex để lấy loại tệp
2. Sử dụng phương pháp tách và bật để lấy loại tệp

Đánh dấu HTML

Mã trông giống như được viết dưới đây

 
 
 Get Extension

Phương pháp 1. Sử dụng regex để lấy phần mở rộng tệp

Mã JavaScript

 function fnGetExtension() {
 //Get the file input element by its id 
 var fileInput = document.getElementById('myFile');
 //Get the file name
 var fileName = fileInput.files[0].name;

// Regular expression for file extension.
 var patternFileExtension = /\.([0-9a-z]+)(?:[\?#]|$)/i;

//Get the file Extension 
 var fileExtension = (fileName).match(patternFileExtension);
 alert(fileExtension);
}

Phương pháp 2. Sử dụng phương pháp tách và bật để lấy loại tệp

Mã JavaScript. Hiển thị phần mở rộng tệp bằng cách sử dụng phương pháp JS tích hợp sẵn và bật

function fnGetExtension() {
 //Get the file input element by its id 
 var fileInput = document.getElementById('myFile');
 //Get the file name
 var fileName = fileInput.files[0].name;
 //Get the file Extension 
 var fileExtension = fileName.split('.').pop();
 alert(fileExtension);
}

Cảm ơn bạn đã đọc, vui lòng tiếp tục truy cập blog này và chia sẻ điều này trong mạng của bạn. Ngoài ra, tôi rất thích nghe ý kiến ​​​​của bạn trong phần bình luận

Làm cách nào để lấy tên tệp từ URL trong JavaScript?

Có cách nào để lấy phần mở rộng tệp từ một URL không?

Làm cách nào để kiểm tra định dạng tệp trong JavaScript?

Phần mở rộng tệp của JavaScript là gì?