Question

如何使用JavaScript验证客户端的文件大小？我正在使用type=file来选择文件

Answer 1

更新2013 在此编辑中，File API在所有主流浏览器中都受支持，在IE中从版本10开始支持

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

你可以在firefox中这样做

HTML：

<form action="" method="get" accept-charset="utf-8">
<input type="file" name="file" value="" id="file">
<p><input type="submit" value="Continue &rarr;"></p>
</form>

的javascript：

var filesize = document.forms[0].file.files[0].fileSize

如果有办法在IE中这样做，我不知道。它可能涉及activeX或其他一些垃圾。

编辑：我发现了here，如何在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>

Answer 2

也许您可以使用SWFUpload代替，这是一个小型Flash应用程序，可以为您处理上传的客户端。从他们的功能列表：

通过对话框中的ctrl / shift-selection一次上传多个文件
所有活动的Javascript回调
在上传开始前获取文件信息
使用XHTML和css
使用HTML
无需重新加载页面
适用于所有支持Flash的平台/浏览器。
如果Flash或javascript不可用，则优雅地降级为普通的HTML上传表格
在上传开始前控制文件大小
仅在对话框中显示所选的文件类型
队列上传，在开始上传之前删除/添加文件

Answer 3

我想结合使用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 &rarr;" onclick="checkBrowser()"></p>
    </form>


    <div id="example"></div>

如何在客户端使用HTML和Javascript验证文件大小

3 个答案: