如何使用 JavaScript 在客户端验证文件大小？我type=file用于选择文件
如何在客户端使用 HTML 和 Javascript 验证文件大小
IT技术
javascript
html
2021-02-24 03:04:50
3个回答
更新 2013 作为此编辑，所有主要浏览器都支持 File API，并且在版本 10 中支持 IE
http://caniuse.com/#search=file%20api
如果您仍然需要支持 IE9 及以下版本，您可能仍然希望使用 SWFUpload，但此时它可能更像是一种后备，因为 html5 文件 api 支持 SWFUpload 无法到达的移动平台。html5 文件 api 基于 firefox 的文件 api，如下所述。
另请参阅此重复问题 Client Checking file size using HTML5?
更新： Firefox 已将其 API 更改为此https://developer.mozilla.org/en/DOM/FileReader
你可以像这样在火狐中做到这一点
html：
<form action="" method="get" accept-charset="utf-8"> <input type="file" name="file" value="" id="file"> <p><input type="submit" value="Continue →"></p> </form>
javascript:
var filesize = document.forms[0].file.files[0].fileSize
如果有办法在 IE 中做到这一点，我不知道。它可能涉及 activeX 或其他一些此类垃圾。
编辑：我在这里找到了这个，如何在 IE 中做到这一点
<head>
<script>
function getSize()
{
var myFSO = new ActiveXObject("Scripting.FileSystemObject");
var filepath = document.upload.file.value;
var thefile = myFSO.getFile(filepath);
var size = thefile.size;
alert(size + " bytes");
}
</script>
</head>
<body>
<form name="upload">
<input type="file" name="file">
<input type="button" value="Size?" onClick="getSize();">
</form>
</body>
</html>
也许您可以改用SWFUpload，它是一个小型 Flash 应用程序，可为您处理上传的客户端。从他们的功能列表中：
- 通过在对话框中按 ctrl/shift-selecting 一次上传多个文件
- 所有事件的 Javascript 回调
- 上传开始前获取文件信息
- 使用 XHTML 和 css 样式上传元素
- 使用 HTML 上传文件时显示信息
- 无需重新加载页面
- 适用于所有支持 Flash 的平台/浏览器。
- 如果 Flash 或 javascript 不可用，则优雅地降级为正常的 HTML 上传表单
- 上传开始前控制文件大小
- 只在对话框中显示选择的文件类型
- 队列上传，在开始上传之前删除/添加文件
我想结合使用 javascript 在客户端检查文件大小的两种不同方法。我已经在 FF/IE/Chrome 上测试过它，它工作正常：
<script type="text/javascript">
function checkBrowser()
{
if(navigator.appName == "WebTV")
{
alert("You're using the WebTV browser.")
}
if(navigator.appName == "Netscape")
{
checkFileSizeFF();
}
if(navigator.appName == "Microsoft Internet Explorer")
{
checkFileSizeIE();
}
}
function checkFileSizeFF()
{
var filesize = document.forms[0].file.files[0].fileSize;
alert(filesize/(1024*1024) + " MB");
}
function checkFileSizeIE()
{
var myFSO = new ActiveXObject("Scripting.FileSystemObject");
var filepath = document.upload.file.value;
var thefile = myFSO.getFile(filepath);
var size = thefile.size/(1024*1024);
alert(size + "MB");
}
</script>
<form action="" method="get" accept-charset="utf-8" name="upload">
<input type="file" name="file" value="" id="file">
<p><input type="submit" value="Continue →" onclick="checkBrowser()"></p>
</form>
<div id="example"></div>
其它你可能感兴趣的问题