Kiểm tra File upload trước khi submit với HTML5 và Javascript

Việc kiểm tra file trước khi upload luôn luôn là việc làm cần thiết cho bất kì website hay blog nào. Trước đây, để kiểm tra file có dung lượng quá lớn, hay file đó không được hỗ trợ để upload… Chúng ta thường phải gửi file đó lên server , rồi mới dùng ngôn ngữ lập trình như PHP để kiểm tra xem chúng có hợp lệ không.

Xem Demo | Download

Nhưng trong những năm gần đây, HTML5 đã hỗ trợ nhiều tính năng mới trên các trình duyệt Web. Một trong số đó là File API, tính năng này cho phép chúng ta kiểm tra được cả tên , dung lượng và còn kiểm chứng xem file đó có được hỗ trợ hay không ngay trên máy người dùng mà không cần phải gửi trả lên server. Để kiểm chứng những gì mình nói nãy giờ, chúng ta sẽ thử thực hành lần lượt cách kiểm tra file trước khi upload như sau :

Đầu tiên, chúng ta cần đoạn html để thực hiện upload như sau :

<input id="i_file" type="file" value="" />
<input id="i_submit" type="button" value="Submit" />

Kiểm tra dung lượng cho phép của File (Trên máy người dùng)

Khi chúng ta nhấn vào nút upload , Javascript sẽ kiểm tra xem liệu trình duyệt của người dùng có hỗ trợ tính năng File API hay không. Và rồi chúng ta sẽ chuyển tới phần kế tiếp là dung lượng file đó có vượt quá hay không.

$('#i_submit').click( function() {
    //kiem tra trinh duyet co ho tro File API
    if (window.File && window.FileReader && window.FileList && window.Blob)
    {
		// lay dung luong va kieu file tu the input file
        var fsize = $('#i_file')[0].files[0].size;

        if(fsize>1048576) //thuc hien dieu gi do neu dung luong file vuot qua 1MB
        {
            alert(fsize +" bites
Too big!");
        }else{
            alert(fsize +" bites
You are good to go!");
        }
    }else{
        alert("Please upgrade your browser, because your current browser lacks some new features we need!");
    }
});

Lấy tên File, Kiểu và Dung lượng

Đoạn code bên dưới đây sẽ trả về tên, dung lượng và kiểu file một cách dễ dàng.

$('#i_submit').click( function() {
   //kiem tra trinh duyet co ho tro File API
    if (window.File && window.FileReader && window.FileList && window.Blob)
    {
       // lay dung luong va kieu file tu the input file
        var fsize = $('#i_file')[0].files[0].size;
        var ftype = $('#i_file')[0].files[0].type;
        var fname = $('#i_file')[0].files[0].name;

        if(fsize>1048576)  //thuc hien dieu gi do neu dung luong file vuot qua 1MB
        {
            alert("Type :"+ ftype +" | "+ fsize +" bites
(File: "+fname+") Too big!");
        }else{
            alert("Type :"+ ftype +" | "+ fsize +" bites
(File :"+fname+") You are good to go!");
        }
    }else{
        alert("Please upgrade your browser, because your current browser lacks some new features we need!");
    }
});

Kiểm tra file được phép tải lên (trên máy người dùng)

Đoạn code bên dưới sẽ giúp chúng ta giới hạn những kiểu file được phép upload, như trong trường hợp này là chỉ cho phép những file ảnh.

$('#i_submit').click( function() {
   //kiem tra trinh duyet co ho tro File API
    if (window.File && window.FileReader && window.FileList && window.Blob)
    {
      // lay dung luong va kieu file tu the input file
        var fsize = $('#i_file')[0].files[0].size;
        var ftype = $('#i_file')[0].files[0].type;
        var fname = $('#i_file')[0].files[0].name;

       switch(ftype)
        {
            case 'image/png':
            case 'image/gif':
            case 'image/jpeg':
            case 'image/pjpeg':
                alert("Acceptable image file!");
                break;
            default:
                alert('Unsupported File!');
        }

    }else{
        alert("Please upgrade your browser, because your current browser lacks some new features we need!");
    }
});

Trên đây chỉ là những ví dụ cơ bản mà bạn có thể làm với File API, hầu như các trình duyệt đều hỗ trợ tính năng này, nhưng các bạn phải cập nhật lên các phiên bản trình duyệt mới nhất.

Chúc các bạn thành công !

Chuyên Mục: HTML5

Bài viết được đăng bởi webmaster