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

【问题标题】：How can I get a file's upload size using simple Javascript?如何使用简单的 Javascript 获取文件的上传大小？
【发布时间】：2010-12-09 01:48:22
【问题描述】：

我在其中一个页面上有上传文件功能。我使用 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>

【问题讨论】：

见stackoverflow.com/questions/547292/how-to-retrieve-size-of-file
为什么要接受错误的答案？检查第二个答案=有可能！
@PankajKhurana — 当您五年前接受一个答案时，您选择的答案是正确的。今天不再是这种情况了，您能否回到这个问题并将已接受的答案更改为现代答案？

标签： javascript upload

【解决方案1】：

见http://www.w3.org/TR/FileAPI/。 Firefox 3.6 支持；我不知道任何其他浏览器。

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

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

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

【讨论】：

【解决方案2】：

现在可以使用纯 JavaScript 获取文件大小。几乎所有浏览器都支持 FileReader，您可以使用它来读取文件大小以及显示图像而无需将文件上传到服务器。 link

代码：

    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;

【讨论】：

【解决方案3】：

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

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

【讨论】：

此外，即使您可以，您仍然需要服务器端检查，因为没有什么可以阻止恶意用户编写他们自己的表单并发布到同一个地方。
@DominicRodger 我同意您必须在服务器端检查文件大小以确保安全。但为了方便起见（我认为这是 OP 的目的），最好事先让用户知道他们的 1 GiB 文件不会被接受，而不是在必须等待文件上传后告诉他们。

【解决方案4】：

这些答案中的大多数都已经过时了。目前可以在任何支持 File API 的浏览器中确定文件大小客户端。这几乎包括除 IE9 和更早版本之外的所有浏览器。

【讨论】：

【解决方案5】：

可能会使用大量特定于浏览器的代码。看看TiddlyWiki 的来源，它通过连接到 Windows Scripting Host (IE)、XPCOM (Mozilla) 等，设法将自己保存在用户的硬盘上。

【讨论】：

【解决方案6】：

我认为没有任何方法可以使用网页中的纯 JS 来做到这一点。
可能使用浏览器扩展，但出于安全原因，javascript 无法从页面访问文件系统。

Flash 和 Java 应该有类似的限制，但可能不那么严格。

【讨论】：

【解决方案7】：

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

【讨论】：

Firefox 3.6 支持此功能。请参阅 HTML 5 的 w3.org/TR/FileAPI>。我用过那个模块，它非常适合通过 AJAX 上传，不需要任何类型的 Flash 对象或 iframe 技巧。

【解决方案8】：

看这里：

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

对于所有说这必须在服务器端完成的人，他们绝对是正确的。

在我的情况下，尽管我将除了 128Mb 之外的最大大小，如果用户尝试上传 130Mb 的内容，他们不应该等待 5 分钟的上传时间来发现它太大，所以我需要做一个为了可用性起见，在他们提交页面之前进行额外检查。

【讨论】：

【解决方案9】：

我有同样的问题，这是一个简单的 JavaScript sn-p 为我工作。为未来的谷歌员工添加。

HTML

<input type="file" name="photo" id="photo" accept="image/*">

JS

const file = document.getElementById('photo');
// Show KB (add one more /1024 for MB)
const filesize = file.files[0].size / 1024; 

if (filesize > 500) { // Alert greater than 500kb 
    console.log(filesize);
    alert('Please upload image less than 500 KB');
    return;
}

【讨论】：