Việc xác thực này giúp hạn chế việc tải lên các tệp lớn hoặc tệp trống lên máy chủ. Chúng tôi sẽ chia sẻ với bạn một cách khá dễ dàng để giới hạn kích thước của tệp tải lên trong một biểu mẫu trang web bằng HTML và Javascript/jQuery.
Xác thực Kích thước Tệp Bằng Ví dụ Javascript
Mã Javascript
function checkFileNewValidation() {
var image = document.getElementById("image");
if (typeof (image.files) != "undefined") {
var size = parseFloat(image.files[0].size / (1024 * 1024)).toFixed(2);
if(size > 2) {
alert('Please select image size less than 2 MB');
}else{
alert('success');
}
} else {
alert("This browser does not support HTML5.");
}
}
Ví dụ: Xác thực yêu cầu tải lên tệp trong javascript
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>File Size Validation Using Javascript Example</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css">
</head>
<body class="bg-dark">
<div class="continer">
<div class="row">
<div class="col-md-6 offset-md-3">
<div class="card">
<div class="card-header">
<h5>File Size Validation Using Javascript Example</h5>
</div>
<div class="card-body">
<form method="post" name="frmAdd" id="frmAdd">
<label for="image">Image:</label>
<input type="file" name="image" class="form-control" id="image" value="" onchange="checkFileNewValidation()"><br/>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="Javascript">
function checkFileNewValidation() {
var image = document.getElementById("image");
if (typeof (image.files) != "undefined") {
var size = parseFloat(image.files[0].size / (1024 * 1024)).toFixed(2);
if(size > 2) {
alert('Please select image size less than 2 MB');
}else{
alert('Good Luck, success');
}
} else {
alert("This browser does not support HTML5.");
}
}
</script>
</html>
Hy vọng bạn có ý tưởng về Xác thực kích thước tệp bằng Javascript trước khi tải lên.
- Bài đăng trên blog này ban đầu được xuất bản tại: https://www.pakainfo.com
