Câu trả lời:
Có , có một tính năng mới từ W3C được hỗ trợ bởi một số trình duyệt hiện đại, API tệp . Nó có thể được sử dụng cho mục đích này và thật dễ dàng để kiểm tra xem nó có được hỗ trợ hay không (nếu cần) cho cơ chế khác nếu không.
Đây là một ví dụ hoàn chỉnh:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Show File Data</title>
<style type='text/css'>
body {
font-family: sans-serif;
}
</style>
<script type='text/javascript'>
function showFileSize() {
var input, file;
// (Can't use `typeof FileReader === "function"` because apparently
// it comes back as "object" on some browsers. So just see if it's there
// at all.)
if (!window.FileReader) {
bodyAppend("p", "The file API isn't supported on this browser yet.");
return;
}
input = document.getElementById('fileinput');
if (!input) {
bodyAppend("p", "Um, couldn't find the fileinput element.");
}
else if (!input.files) {
bodyAppend("p", "This browser doesn't seem to support the `files` property of file inputs.");
}
else if (!input.files[0]) {
bodyAppend("p", "Please select a file before clicking 'Load'");
}
else {
file = input.files[0];
bodyAppend("p", "File " + file.name + " is " + file.size + " bytes in size");
}
}
function bodyAppend(tagName, innerHTML) {
var elm;
elm = document.createElement(tagName);
elm.innerHTML = innerHTML;
document.body.appendChild(elm);
}
</script>
</head>
<body>
<form action='#' onsubmit="return false;">
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load' onclick='showFileSize();'>
</form>
</body>
</html>
Và đây là hành động. Hãy thử điều đó với phiên bản Chrome hoặc Firefox gần đây.
Hơi lạc đề, nhưng: Lưu ý rằng xác thực phía máy khách không thể thay thế cho xác thực phía máy chủ. Xác thực phía khách hàng hoàn toàn là để cung cấp trải nghiệm người dùng đẹp hơn. Ví dụ: nếu bạn không cho phép tải lên tệp lớn hơn 5 MB, bạn có thể sử dụng xác thực phía máy khách để kiểm tra xem tệp mà người dùng đã chọn có kích thước không quá 5 MB và cung cấp cho họ một thông điệp thân thiện tốt đẹp nếu đó là (vì vậy họ không dành toàn bộ thời gian tải lên chỉ để lấy kết quả ở máy chủ), nhưng bạn cũng phải thực thi giới hạn đó tại máy chủ, vì tất cả các giới hạn phía máy khách (và các xác nhận khác) có thể bị phá vỡ.
Sử dụng jquery:
<form action="upload" enctype="multipart/form-data" method="post">
Upload image:
<input id="image-file" type="file" name="file" />
<input type="submit" value="Upload" />
<script type="text/javascript">
$('#image-file').bind('change', function() {
alert('This file size is: ' + this.files[0].size/1024/1024 + "MB");
});
</script>
</form>
MiBnếu bạn tính toán đến cơ sở của 1024.
Hoạt động cho phần tử tệp động và tĩnh
Giải pháp chỉ Javascript
function ValidateSize(file) {
var FileSize = file.files[0].size / 1024 / 1024; // in MB
if (FileSize > 2) {
alert('File size exceeds 2 MB');
// $(file).val(''); //for clearing with Jquery
} else {
}
} <input onchange="ValidateSize(this)" type="file">sizetính
$(obj).files[0].size/1024/1024; Nhưng đổi nó thànhobj.files[0].size/1024/1024;
Không Có, sử dụng API tệp trong các trình duyệt mới hơn. Xem câu trả lời của TJ để biết chi tiết.
Nếu bạn cũng cần hỗ trợ các trình duyệt cũ hơn, bạn sẽ phải sử dụng trình tải lên dựa trên Flash như SWFUpload hoặc Uploadify để làm điều này.
Bản demo tính năng SWFUpload cho thấy cách file_size_limitcài đặt hoạt động.
Lưu ý rằng điều này (rõ ràng) cần Flash, cộng với cách thức hoạt động hơi khác so với các hình thức tải lên thông thường.
Nó khá đơn giản.
var oFile = document.getElementById("fileUpload").files[0]; // <input type="file" id="fileUpload" accept=".jpg,.png,.gif,.jpeg"/>
if (oFile.size > 2097152) // 2 mb for bytes.
{
alert("File size must under 2mb!");
return;
}
Nếu bạn đang sử dụng Xác thực jQuery, bạn có thể viết một cái gì đó như thế này:
$.validator.addMethod(
"maxfilesize",
function (value, element) {
if (this.optional(element) || ! element.files || ! element.files[0]) {
return true;
} else {
return element.files[0].size <= 1024 * 1024 * 2;
}
},
'The file size can not exceed 2MB.'
);
Tôi đã làm một cái gì đó như thế:
$('#image-file').on('change', function() {
var numb = $(this)[0].files[0].size/1024/1024;
numb = numb.toFixed(2);
if(numb > 2){
alert('to big, maximum is 2MB. You file size is: ' + numb +' MB');
} else {
alert('it okey, your file has ' + numb + 'MB')
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="file" id="image-file">Tôi sử dụng một chức năng Javascript chính mà tôi đã tìm thấy tại trang web Mozilla Developer Network https://developer.mozilla.org/en-US/docs/Using_files_from_web_appluggest , cùng với một chức năng khác với AJAX và thay đổi theo nhu cầu của tôi. Nó nhận được một id phần tử tài liệu liên quan đến vị trí trong mã html của tôi nơi tôi muốn viết kích thước tệp.
<Javascript>
function updateSize(elementId) {
var nBytes = 0,
oFiles = document.getElementById(elementId).files,
nFiles = oFiles.length;
for (var nFileId = 0; nFileId < nFiles; nFileId++) {
nBytes += oFiles[nFileId].size;
}
var sOutput = nBytes + " bytes";
// optional code for multiples approximation
for (var aMultiples = ["K", "M", "G", "T", "P", "E", "Z", "Y"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
sOutput = " (" + nApprox.toFixed(3) + aMultiples[nMultiple] + ")";
}
return sOutput;
}
</Javascript>
<HTML>
<input type="file" id="inputFileUpload" onchange="uploadFuncWithAJAX(this.value);" size="25">
</HTML>
<Javascript with XMLHttpRequest>
document.getElementById('spanFileSizeText').innerHTML=updateSize("inputFileUpload");
</XMLHttpRequest>
Chúc mừng
Mặc dù câu hỏi đã được trả lời, tôi muốn đăng câu trả lời của mình. Có thể có ích cho người xem trong tương lai. Bạn có thể sử dụng nó như trong đoạn mã sau.
<input type="file" id="fileinput" />
<script type="text/javascript">
function readSingleFile(evt) {
//Retrieve the first (and only!) File from the FileList object
var f = evt.target.files[0];
if (f) {
var r = new FileReader();
r.onload = function(e) {
var contents = e.target.result;
alert( "Got the file.n"
+"name: " + f.name + "n"
+"type: " + f.type + "n"
+"size: " + f.size + " bytesn"
+ "starts with: " + contents.substr(1, contents.indexOf("n"))
);
if(f.size > 5242880) {
alert('File size Greater then 5MB!');
}
}
r.readAsText(f);
} else {
alert("Failed to load file");
}
}
Ví dụ về JQuery được cung cấp trong chuỗi này cực kỳ lỗi thời và google hoàn toàn không hữu ích vì vậy đây là bản sửa đổi của tôi:
<script type="text/javascript">
$('#image-file').on('change', function() {
console.log($(this)[0].files[0].name+' file size is: ' + $(this)[0].files[0].size/1024/1024 + 'Mb');
});
</script>Bạn có thể dùng thử bộ nạp tiền này
Nó hoạt động tốt trong IE6 (trở lên), Chrome hoặc Firefox
Nếu bạn đặt Ie Mode Chế độ tài liệu 'thành' Tiêu chuẩn ', bạn có thể sử dụng phương pháp' kích thước 'javascript đơn giản để lấy kích thước tệp được tải lên.
Đặt 'Chế độ tài liệu' thành 'Tiêu chuẩn':
<meta http-equiv="X-UA-Compatible" content="IE=Edge">Hơn, sử dụng phương pháp javascript 'size' để lấy kích thước của tệp đã tải lên:
<script type="text/javascript">
var uploadedFile = document.getElementById('imageUpload');
var fileSize = uploadedFile.files[0].size;
alert(fileSize);
</script>Nó làm việc cho tôi.