Question

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

Answer 1

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

在onchange的{{1}}事件中，只需：

<input id="fileInput" type="file" />

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

Answer 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;

Answer 3

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

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

Answer 4

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

Answer 5

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

Answer 6

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

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

Answer 7

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

Answer 8

见这里：

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

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

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

Answer 9

我遇到了同样的问题，这是一个对我有用的简单 JavaScript 代码段。为未来的谷歌员工添加。

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;
}

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

9 个答案: