Javascript và file upload

Javascript và file upload hướng dẫn code javascript để xử lý các file upload. Như kiểm tra kiểu file, kích thước, số lượng file…

Tag input tạo file upload

Khi cần tạo 1 control để người xem chọn file upload. Bạn sẽ dùng tag input với type là file. Xem ví dụ sau:

<input type="file" multiple="true" name="f1">

Các thuộc tính html cho file upload

Sau đây là một số thuốc tính html cần quan tâm và sử dụng để lập trình javascript tương tác với file upload

Các sự kiện của file upload

Hai sự kiện hỗ trợ là change là input. Sự kiện change thường được dùng để chạy hàm javascript xử lý khi user chọn file.

Ví dụ dùng javascript và file upload

<form enctype="multipart/form-data" method="post" action="">
  Chọn file 
  <input type="file" accept=".png,.jpg,.docx" onchange="xulyfile()">
</form> 
<script>
function xulyfile(){
   let arr = event.target.files;//mảng các file được chọn
   let f = arr[0];
   console.log(f);
}
</script>

Hiện ra trang khi user user chọn hình

<form enctype="multipart/form-data" method="post" action="">
   Chọn hình (.jpg, .png) <br>
   <input type="file" accept=".png, .jpg" onchange="xulyfile()" >
   <br><img src="" id="hinh">
</form> 
<script>
function xulyfile(){
   let f1 = event.target.files[0];
   let hinh = document.querySelector("#hinh");
   if (f1.type=="image/png" || f1.type=="image/jpeg"){
	hinh.src = window.URL.createObjectURL(f1);
   }
}
</script>

Kiểm tra file có kích thước quá lớn

Nếu muốn thông báo và bỏ qua file khi user chọn file có kích thước lớn. Bạn đơn giản chỉ việc kiểm tra thông số size của file và báo lỗi khi lớn hơn kích thước nào đó. Ví dụ sau báo lỗi và bỏ qua file khi user chọn file >1MB.

<form enctype="multipart/form-data" method="post" action="">
    Chọn file <input type="file" accept=".png, .jpg, .docx" onchange="xulyfile()">
</form> 
<script>
function xulyfile(){
   let arr = event.target.files;//mảng các file được chọn
   let f = arr[0];
   console.log(f);
   let size = f.size;
   if(size > 1024 * 1024) {
    alert("File lớn quá bạn ơi");
    event.target.value="";
   }
}
</script>

Cho phép chọn nhiều file upload

<form enctype="multipart/form-data" method="post" action="">
  Chọn file 
  <input type="file" multiple="true" onchange="xulyfile()" name="f1">
</form> 
<script>
function xulyfile(){
    let arr = event.target.files;
    console.dir(arr);
    for(i=0; i<arr.length; i++){
        f = arr[i];
        console.log( f.name, f.size, f.type );
    }
}
</script>

Trong các hàm xử lý, bạn có thể code để kiểm tra số lượng file, kiểu file , kích thước file… để thực hiện các thông báo cần thiết để user chọn đúng.

Mời bạn xem thêm các link sau:

• https://www.w3schools.com/jsreF/dom_obj_fileupload.asp
• https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file