JavaScript 文件上传大小验证答案

【问题标题】：JavaScript file upload size validationJavaScript 文件上传大小验证
【发布时间】：2011-04-12 16:19:12
【问题描述】：

有没有办法在使用 JavaScript 上传之前检查文件大小？

【问题讨论】：

标签： javascript validation file-upload

【解决方案1】：

否是，在较新的浏览器中使用文件 API。有关详细信息，请参阅 TJ 的答案。

如果您还需要支持旧版浏览器，则必须使用基于 Flash 的上传器，例如 SWFUpload 或 Uploadify。

SWFUpload Features Demo 显示了file_size_limit 设置的工作原理。

请注意，这（显然）需要 Flash，而且它的工作方式与普通的上传表单有点不同。

【讨论】：

【解决方案2】：

是的，您可以为此使用File API。

这是一个完整的例子（见 cmets）：

document.getElementById("btnLoad").addEventListener("click", function showFileSize() {
    // (Can't use `typeof FileReader === "function"` because apparently it
    // comes back as "object" on some browsers. So just see if it's there
    // at all.)
    if (!window.FileReader) { // This is VERY unlikely, browser support is near-universal
        console.log("The file API isn't supported on this browser yet.");
        return;
    }

    var input = document.getElementById('fileinput');
    if (!input.files) { // This is VERY unlikely, browser support is near-universal
        console.error("This browser doesn't seem to support the `files` property of file inputs.");
    } else if (!input.files[0]) {
        addPara("Please select a file before clicking 'Load'");
    } else {
        var file = input.files[0];
        addPara("File " + file.name + " is " + file.size + " bytes in size");
    }
});

function addPara(text) {
    var p = document.createElement("p");
    p.textContent = text;
    document.body.appendChild(p);
}

body {
    font-family: sans-serif;
}

<form action='#' onsubmit="return false;">
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load'>
</form>

有点离题，但是：请注意，客户端验证不能替代服务器端验证。客户端验证纯粹是为了提供更好的用户体验。例如，如果您不允许上传超过 5MB 的文件，您可以使用客户端验证来检查用户选择的文件大小是否不超过 5MB，如果是，则给他们一个友好的消息（因此他们不会花费所有时间上传只是为了将结果丢弃在服务器上），但是您必须还在服务器上强制执行该限制，因为所有客户端限制（以及其他验证）可以被规避。

【讨论】：

+1 表示“可以绕过所有客户端限制（和其他验证）”。对于“本机”/“编译”数据库前端应用程序也是如此。并且不要将数据库访问密码放在编译的代码中，甚至不要“加密”（密码也在代码中 - 最近才看到）。

【解决方案3】：

你可以试试这个fineuploader

在 IE6（及以上）、Chrome 或 Firefox 下运行良好

【讨论】：

Fine Uploader 无法在 IE9 和更早版本中验证文件大小，因为不支持文件 API。 IE10 是第一个支持 File API 的 Internet Explorer 版本。

【解决方案4】：

使用 jquery：

$('#image-file').on('change', function() {
  console.log('This file size is: ' + this.files[0].size / 1024 / 1024 + "MiB");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form action="upload" enctype="multipart/form-data" method="post">

  Upload image:
  <input id="image-file" type="file" name="file" />
  <input type="submit" value="Upload" />


</form>

【讨论】：

@ipd，IE8 回退的机会吗？（我恨自己甚至提到 IE）
这个可以工作，但它也可以用于多个文件吗？
如果以1024为底计算，应该是MiB。

【解决方案5】：

如果你使用 jQuery 验证，你可以这样写：

$.validator.addMethod(
  "maxfilesize",
  function (value, element) {
    if (this.optional(element) || ! element.files || ! element.files[0]) {
      return true;
    } else {
      return element.files[0].size <= 1024 * 1024 * 2;
    }
  },
  'The file size can not exceed 2MiB.'
);

【讨论】：

【解决方案6】：

我使用我在 Mozilla 开发者网络站点 https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications 找到的一个主要 Javascript 函数，以及另一个 AJAX 函数，并根据我的需要进行了更改。它接收关于我的 html 代码中我要写入文件大小的位置的文档元素 ID。

<Javascript>

function updateSize(elementId) {
    var nBytes = 0,
    oFiles = document.getElementById(elementId).files,
    nFiles = oFiles.length;

    for (var nFileId = 0; nFileId < nFiles; nFileId++) {
        nBytes += oFiles[nFileId].size;
    }
    var sOutput = nBytes + " bytes";
    // optional code for multiples approximation
    for (var aMultiples = ["K", "M", "G", "T", "P", "E", "Z", "Y"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
        sOutput = " (" + nApprox.toFixed(3) + aMultiples[nMultiple] + ")";
    }

    return sOutput;
}
</Javascript>

<HTML>
<input type="file" id="inputFileUpload" onchange="uploadFuncWithAJAX(this.value);" size="25">
</HTML>

<Javascript with XMLHttpRequest>
document.getElementById('spanFileSizeText').innerHTML=updateSize("inputFileUpload");
</XMLHttpRequest>

干杯

【讨论】：

【解决方案7】：

如果您将即“文档模式”设置为“标准”，您可以使用简单的 javascript 'size' 方法来获取上传文件的大小。

将即“文档模式”设置为“标准”：

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

然后，使用 'size' javascript 方法获取上传文件的大小：

<script type="text/javascript">
    var uploadedFile = document.getElementById('imageUpload');
    var fileSize = uploadedFile.files[0].size;
    alert(fileSize); 
</script>

它对我有用。

【讨论】：

这在 IE9 或更早版本中不起作用，无论您添加什么元标记。

【解决方案8】：

这很简单。

const oFile = document.getElementById("fileUpload").files[0]; // <input type="file" id="fileUpload" accept=".jpg,.png,.gif,.jpeg"/>

if (oFile.size > 2097152) // 2 MiB for bytes.
{
  alert("File size must under 2MiB!");
  return;
}

【讨论】：

【解决方案9】：

即使问题得到了回答，我还是想发布我的答案。可能会对未来的观众派上用场。您可以像在以下代码中一样使用它。

document.getElementById("fileinput").addEventListener("change",function(evt) {
  //Retrieve the first (and only!) File from the FileList object
  var f = evt.target.files[0];
  if (f) {
    var r = new FileReader();
    r.onload = function(e) {
      var contents = e.target.result;
      alert("Got the file\n" +
        "name: " + f.name + "\n" +
        "type: " + f.type + "\n" +
        "size: " + f.size + " bytes\n" +
        "starts with: " + contents.substr(1, contents.indexOf("\n"))
      );
      if (f.size > 5242880) {
        alert('File size Greater then 5MiB!');
      }


    }
    r.readAsText(f);
  } else {
    alert("Failed to load file");
  }
})

&lt;input type="file" id="fileinput" /&gt;

【讨论】：

赞成只是因为你让我节省了 5 分钟来计算 5 MB 的字节数；-)

【解决方案10】：

适用于动态和静态文件元素

Javascript唯一解决方案

function validateSize(input) {
  const fileSize = input.files[0].size / 1024 / 1024; // in MiB
  if (fileSize > 2) {
    alert('File size exceeds 2 MiB');
    // $(file).val(''); //for clearing with Jquery
  } else {
    // Proceed further
  }
}

&lt;input onchange="validateSize(this)" type="file"&gt;

【讨论】：

不错的答案。我遇到了同样的问题，但你的解决方案对我有用:)
NB OP 编辑了帖子，因此代码现在是正确的，使用 size 属性
感谢您的回答，我几乎在做同样的事情，但做了一个更改。 $(obj).files[0].size/1024/1024; 不过改成obj.files[0].size/1024/1024;
有没有办法扩展它以进行宽度和高度验证？（以“文件”为起点并假设它指的是图像）
@jlmontesdeoca 我认为您可以在画布的帮助下读取文件并在此处获取其高度和宽度。

【解决方案11】：

此线程中提供的 JQuery 示例非常过时，谷歌根本没有帮助，所以这是我的修订：

<script type="text/javascript">
  $('#image-file').on('change', function() {
    console.log($(this)[0].files[0].name+' file size is: ' + $(this)[0].files[0].size/1024/1024 + 'Mb');
  });
</script>

【讨论】：

【解决方案12】：

我做了类似的东西：

$('#image-file').on('change', function() {
  var numb = $(this)[0].files[0].size / 1024 / 1024;
  numb = numb.toFixed(2);
  if (numb > 2) {
    alert('to big, maximum is 2MiB. You file size is: ' + numb + ' MiB');
  } else {
    alert('it okey, your file has ' + numb + 'MiB')
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="file" id="image-file">

【讨论】：

这表示javascript，JQuery不在标签中

【解决方案13】：

我遇到了这个问题，我需要的一行代码隐藏在大块代码中。

简答：this.files[0].size

顺便说一句，不需要 JQuery。

【讨论】：

【解决方案14】：

简单的方法是

const myFile = document.getElementById("fileUpload").files[0]; 
            if (myFIle.size > 2097152) // 2 MiB for bytes.
            {
                alert("File size must under 2MiB!");
                return;
            }

【讨论】：

【解决方案15】：

我使用这个脚本来验证文件类型和大小

 var _validFilejpeg = [".jpeg", ".jpg", ".bmp", ".pdf"];

    function validateForSize(oInput, minSize, maxSizejpeg) {
        //if there is a need of specifying any other type, just add that particular type in var  _validFilejpeg
        if (oInput.type == "file") {
            var sFileName = oInput.value;
            if (sFileName.length > 0) {
                var blnValid = false;
                for (var j = 0; j < _validFilejpeg.length; j++) {
                    var sCurExtension = _validFilejpeg[j];
                    if (sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length)
                        .toLowerCase() == sCurExtension.toLowerCase()) {
                        blnValid = true;
                        break;
                    }
                }

                if (!blnValid) {
                    alert("Sorry, this file is invalid, allowed extension is: " + _validFilejpeg.join(", "));
                    oInput.value = "";
                    return false;
                }
            }
        }

        fileSizeValidatejpeg(oInput, minSize, maxSizejpeg);
    }

    function fileSizeValidatejpeg(fdata, minSize, maxSizejpeg) {
        if (fdata.files && fdata.files[0]) {
            var fsize = fdata.files[0].size /1024; //The files property of an input element returns a FileList. fdata is an input element,fdata.files[0] returns a File object at the index 0.
            //alert(fsize)
            if (fsize > maxSizejpeg || fsize < minSize) {
                alert('This file size is: ' + fsize.toFixed(2) +
                    "KB. Files should be in " + (minSize) + " to " + (maxSizejpeg) + " KB ");
                fdata.value = ""; //so that the file name is not displayed on the side of the choose file button
                return false;
            } else {
                console.log("");
            }
        }
    }

&lt;input type="file"  onchange="validateForSize(this,10,5000);" &gt;

【讨论】：