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

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的事件<input id="fileInput" type="file" />只是:

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

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

Answer 2

现在可以使用纯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;

Answer 3

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

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