Đầu vào thẻ javascript

Javascript và tệp tải lên hướng dẫn mã javascript để xử lý các tệp tải lên. Như kiểm tra kiểu tệp, kích thước, số lượng tệp…

Nhập thẻ tạo tệp tải lên

Khi cần tạo 1 điều khiển để người xem chọn tải lên tệp. You will used tag input with type is file. Xem ví dụ sau

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 để thiết lập chương trình javascript tương tác với tệp tải lên

Thuộc tính mô tả name Tên của đầu vào, dùng khi gửi idTên duy nhất định danh thẻ đầu vào, dùng trong css, jsmultipleCho phép người dùng chọn nhiều tệp tệpMảng các tệp mà người dùng chọn. Mỗi phần tử là 1 tệp có các thông tin. name, size, type, lastModified, lastModifiedDateacceptLiệt kê các loại tệp cho phép người dùng chọn trong hộp thoại chọn tệp

Các sự kiện của tệp tải lên

Hai sự kiện hỗ trợ là thay đổi đầu vào. Sự kiện thay đổi thường được sử dụng để chạy hàm javascript xử lý khi người dùng chọn tệp

Ví dụ sử dụng javascript và tải lên tệp

  Chọn file 
  
 

function xulyfile[]{
   var arr = event.target.files;//mảng các file được chọn
   var f = arr[0];
   console.log[f];
}

Hiển thị trang khi người dùng chọn cấu hình

   Chọn hình [.jpg, .png] 

   
   

 

function xulyfile[]{
   var f1 = event.target.files[0];
   var hinh = document.querySelector["#hinh"];
   if [f1.type=="image/png" || f1.type=="image/jpeg"]{
	hinh.src = window.URL.createObjectURL[f1];
   }
}

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

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

    Chọn file 
 

function xulyfile[]{
   var arr = event.target.files;//mảng các file được chọn
   var f = arr[0];
   console.log[f];
   var size = f.size;
   if[size > 1024 * 1024] {
    alert["File lớn quá bạn ơi"];
    event.target.value="";
   }
}

Cho phép chọn tải lên nhiều tệp

  Chọn file 
  
 

function xulyfile[]{
    var arr = event.target.files;
    console.dir[arr];
    for[i=0; i