[jQuery] Kiểm tra định dạng file trước khi upload

Có khi nào bạn muốn kiểm tra file được upload trong một form nào đó ? Ví dụ bạn chỉ cho phép người dùng upload file text (.txt) nhưng họ lại tải lên file thực thi (.exe) hoặc bất cứ file gì họ muốn. Vậy làm thế nào để kiểm soát và ngăn chặn người dùng upload những file với định dạng mà bạn không mong muốn. Bài viết hôm nay sẽ đề cập đến vấn đề này.

Hầu hết các trang web hiện nay đều cho phép upload ảnh, khi bạn vào phần Quản lý tài khoản, thường sẽ được quyền upload một ảnh nào đó làm avatar (ảnh đại diện). Tôi sẽ viết một đoạn code để minh họa việc cho phép người dùng chỉ được tải lên một file ảnh và khi cố tình đăng tải những file có định dạng khác sẽ bị báo lỗi

Mã HTML

<input id="test_input" type="file" />
<button id="test_button">Kiểm tra định dạng</button>

Và mã jQuery để xử lý

$(document).ready(function(){
  $("#test_button").click(function() {
    var test_value = $("#test_input").val();
    var extension = test_value.split('.').pop().toLowerCase();

    if ($.inArray(extension, ['png', 'gif', 'jpeg', 'jpg']) == -1) {
      alert("File ảnh không hợp lệ!");
      return false;
    } else {
      alert("File ảnh hợp lệ!");
      return false;
    }
  });
});

Khi nhìn vào đoạn code xử lý, các bạn có thể dễ dàng nhận ra thuật toán tôi dùng cũng khá đơn giản phải không ? Đầu tiên tôi sẽ lấy tên file , sau đó tách phần định dạng file và cuối cùng là so sánh phần định dạng đó với một mảng các định dạng khác (như ‘png’, ‘gif’, ‘jpeg’, ‘jpg’) mà tôi mong muốn.

Sau khi hiểu và nắm bắt được thuật toán, các bạn hoàn toàn có thể tùy biến cho trang web của mình, có thể thay phần $.inArray(extension, [‘png’, ‘gif’, ‘jpeg’, ‘jpg’]) bằng $.inArray(extension, [‘doc’, ‘docx’]) chẳng hạn để người dùng chỉ được upload file Word.

Hi vọng bài viết này sẽ giúp ích cho các bạn. Thân!

 

 

Tấn Việt

Tôi lập trang web này để thỏa mãn sở thích viết cái gì đó vui vui khi rãnh rỗi và đồng thời cũng chia sẻ những gì tôi biết hoặc đọc đâu đó trên mạng về Lập trình web. Tôi hi vọng những bài viết này sẽ giúp ích cho các bạn. Thân ái!

You may also like...

2 Responses

  1. JimmyLin says:

    Giả sử,.. chuổi ban đầu có nhiều (3 chẳn hạn) ký tự dấm chấm(.)
    thì split() nó cắt ra và tạo thành mảng
    và pop() lấy phần tử của mảng cuối.
    shift() lấy phẩn tử của mảng đầu
    ==>> mình mún lấy phần tử của mảng thứ 2 thì sao.

    • Tấn Việt says:

      Bạn có thể sử dụng hàm split(separator, limit) để có thể lấy được chuỗi thứ 2 bạn cần. Trong đó tham số:
      + separator : Kí tự bạn muốn tách
      + limit : Giới hạn số lượng bạn muốn lấy

      Mình đã làm một ví dụ cho bạn. Đầu tiên mình sẽ chia chuỗi ban đầu với hàm split() với giới hạn chỉ là 2 chuỗi trả về, sau đó dùng hàm pop() để lấy phần tử cuối cũng chính là phần tử thứ 2 của chuỗi ban đầu. Bạn xem code dưới đây nhé.

      Mã HTML

      Chuỗi ban đầu: abc.ada.def123.ghi.ghi.defg
      Kết quả:

      Và mã jQuery để xử lý

      $(document).ready(function(){
          var init = $("#init_string").text();
          var result = init.split('.', 2).pop();
          $("#result_string").text(result);
      });
      

      Thân ái!

Leave a Reply

Your email address will not be published. Required fields are marked *