如何使用简单的Javascript获取文件的上传大小？

StackOverflow https://stackoverflow.com/questions/1606842

  •  05-07-2019
  •  | 
  •  

题

我在其中一个页面上传了文件功能。我使用JavaScript检查文件的扩展名。现在我想限制用户上传大于1 MB的文件。有什么办法可以使用JavaScript检查文件上传大小。

我的代码目前看起来像这样：

<script language="JavaScript">
function validate() {
   var filename = document.getElementById("txtChooseFile").value;
   var ext = getExt(filename);
   if(ext == "txt" || ext == "csv")
      return true;
   alert("Please upload Text files only.");
   return false;
}

function getExt(filename) {
   var dot_pos = filename.lastIndexOf(".");
   if(dot_pos == -1)
      return "";
   return filename.substr(dot_pos+1).toLowerCase();
}
</script>
有帮助吗？

解决方案

获取文件名的其他内容无法让您在javascript中找到有关该文件的任何其他详细信息，包括其大小。

相反，您应该配置服务器端脚本以阻止超大上传。

其他提示

请参阅 http://www.w3.org/TR/FileAPI/ 。它受Firefox 3.6支持;我不知道任何其他浏览器。

在onchange的<input id="fileInput" type="file" />事件中，只需：

var fi = document.getElementById('fileInput');
alert(fi.files[0].size); // maybe fileSize, I forget

您还可以将文件的内容作为字符串返回，依此类推。但同样，这可能仅适用于Firefox 3.6。

现在可以使用纯JavaScript获取文件大小。几乎所有浏览器都支持FileReader，您可以使用它来读取文件大小，也可以在不将文件上传到服务器的情况下显示图像。 链接

代码：

    var oFile = document.getElementById("file-input").files[0]; // input box with type file;
    var img = document.getElementById("imgtag");
    var reader = new FileReader();
    reader.onload = function (e) {
            console.log(e.total); // file size 
            img.src =  e.target.result; // putting file in dom without server upload.

   };
   reader.readAsDataURL(oFile );

您可以使用以下代码直接从文件对象获取文件大小。 

 var fileSize = oFile.size;

这些答案大多都是过时的。目前，可以在任何支持File API的浏览器中确定客户端的文件大小。这几乎包括IE9以外的所有浏览器。

可能使用大量特定于浏览器的代码。看一下 TiddlyWiki 的来源，它通过挂钩到Windows来设法将自己保存在用户的硬盘上脚本主机（IE），XPCOM（Mozilla）等

我认为用网页上的普通JS没有办法做到这一点。
可能有浏览器扩展名，但是出于安全原因，javascript无法访问文件系统。

Flash和Java应该有类似的限制，但也许它们不那么严格。

不可能。允许客户端脚本运行可以从最终用户硬盘读取文件信息，这将是一个主要的安全问题。

见这里：

http：// www.kavoir.com/2009/01/check-for-file-size-with-javascript-before-uploading.html

至于所有人都说这必须在服务器方面完成，他们绝对可以做到。

在我的情况下虽然最大尺寸我将除外是128Mb，如果用户试图上传130Mb的东西，他们不应该等待5分钟的上传时间来发现它太大所以我需要做一个为了实用起见，在提交页面之前进行额外检查。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top