Trong ứng dụng website việc xác nhận loại tệp tin trước khi thực hiện upload lên server là một điều bắt buộc, đảm bảo cho người dùng chọn đúng loại để tải lên, việc kiểm tra này có thể thực hiện ở php(server) hoặc javascript(client), trong bài này mình sẽ thực hiện ở client bằng javascript.
Trong hướng dẫn này, tôi sẽ chỉ ra cách bạn có thể thực hiện xác nhận hợp lệ tệp tin trong JavaScript. Sử dụng tập lệnh này, bạn có thể hạn chế người dùng chỉ tải lên các loại tập tin được cho phép.
Trong ví dụ, tôi sẽ xác nhận tệp hình ảnh bằng JavaScript và cho phép người dùng chỉ chọn tệp .jpg, .jpeg, .png và .gif. Nếu phần mở rộng tệp được chọn không khớp với các loại được chỉ định, thông báo cảnh báo sẽ được hiển thị cho người dùng. Nếu chọn đúng sẽ hiển thị hình ảnh cho bạn xem trước.
HTML
[html]
<!– File input field –>
<input type="file" id="file" onchange="return fileValidation()"/>
<!– Image preview –>
<div id="imagePreview"></div>
[/html]
Phần này trong thẻ body, một thẻ input với type là file để chọn tập tin, và một thẻ div có id là imagePreview để hiển thị hình ảnh nếu chọn đúng định dạng cho phép.
Khi chọn tập tin thì hàm fileValidation() sẽ được thực hiện, chọn đúng định dạng sẽ xuất hiện hình ảnh xem trước cho chúng ta xem.
JavaScript
[html]
<script>
function fileValidation(){
var fileInput = document.getElementById(‘file’);
var filePath = fileInput.value;//lấy giá trị input theo id
var allowedExtensions = /(\.jpg|\.jpeg|\.png|\.gif)$/i;//các tập tin cho phép
//Kiểm tra định dạng
if(!allowedExtensions.exec(filePath)){
alert(‘Vui lòng upload các file có định dạng: .jpeg/.jpg/.png/.gif only.’);
fileInput.value = ”;
return false;
}else{
//Image preview
if (fileInput.files && fileInput.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById(‘imagePreview’).innerHTML = ‘<img style="width:700px;height:400px;" src="’+e.target.result+’"/>’;
};
reader.readAsDataURL(fileInput.files[0]);
}
}
}
</script>
[/html]
biến allowedExtensions chứa giá trị là các định dạng loại tập tin cho phép, nếu các bạn cần các loại khác có thể thêm vào. Với bài hướng dẫn này, tôi chỉ kiểm tra các tệp tin loại hình ảnh để có thể xem trước được, còn nếu bạn chọn các loại khác như: word, pdf… sẽ không xem được trước nha.
OK vậy là xong, các bạn demo ở đây:
[create_button_post thamso1=”http://nongdanit.info/demo/xac-nhan-tep-tin-javascript/” thamso2=’Demo’] [/create_button_post]
[thongbao]
- Nếu có thắc mắc gì các bạn để lại comment bên dưới mình sẽ trả lời sớm nhất có thể.
- Cảm ơn các bạn đã đọc.
[/thongbao]