T.J*_*der 309
是的,W3C的一项新功能得到了一些现代浏览器File API的支持.它可以用于此目的,并且很容易测试它是否受支持并且如果不支持则返回(如果需要)另一个机制.
这是一个完整的例子:
<!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>
而这里是它的行为.尝试使用最新版本的Chrome或Firefox.
稍微偏离主题,但是:请注意,客户端验证不能替代服务器端验证.客户端验证纯粹是为了提供更好的用户体验.例如,如果您不允许上传超过5MB的文件,您可以使用客户端验证来检查用户选择的文件大小不超过5MB,如果是,则给他们一个友好的友好消息(因此,他们不会花费所有时间仅上传以将结果丢弃在服务器上),但您还必须在服务器上强制执行该限制,因为可以规避所有客户端限制(和其他验证).
Ben*_*Ben 113
使用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>
Aru*_*E S 55
适用于动态和静态文件元素
Javascript Only解决方案
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">Pek*_*ica 14
否是,在较新的浏览器中使用File API.有关详细信息,请参阅TJ的答案.
如果您还需要支持旧版浏览器,则必须使用基于Flash的上传器(如SWFUpload或Uploadify)来执行此操作.
该SWFUpload的功能演示展示了如何file_size_limit设置工作.
请注意,这(显然)需要Flash,加上它的工作方式与普通上传表单略有不同.
Has*_*ruç 13
这很简单.
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;
}
Nik*_*iou 12
如果您正在使用jQuery Validation,您可以编写如下内容:
$.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.'
);
小智 11
我做了这样的事情：
$('#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 2MiB. You file size is: ' + numb + ' MiB');
} else {
alert('it okey, your file has ' + numb + 'MiB')
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="file" id="image-file">即使问题得到了回答，我还是想发布我的答案。可能对未来的观众有用。你可以像下面的代码一样使用它。
<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 5MiB!');
}
}
r.readAsText(f);
} else {
alert("Failed to load file");
}
}
| 归档时间： |
|
| 查看次数： |
434969 次 |
| 最近记录： |