上传前获取文件大小

Posted 2023-05-09

技术标签:

【中文标题】上传前获取文件大小【英文标题】：Get file size before uploading 【发布时间】：2017-11-22 12:05:47 【问题描述】：

在输入文件的更改事件中使用 AJAX/php 上传文件之前，有什么方法可以找出文件大小？

【问题讨论】：

显然与***.com/search?q=file+size+before+upload重复 How to check file input size with jQuery?的可能重复 javascript file upload size validation的可能重复 【参考方案1】：

对于下面的 html

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

尝试以下方法：

//binds to onchange event of your input field
$('#myFile').bind('change', function() 

  //this.files[0].size gets the size of your file.
  alert(this.files[0].size);

);

请参阅以下主题：

How to check file input size with jQuery?

【讨论】：

Internet Explorer（旧版本）上不是文件数组不存在吗？是的，这在 IE 10 之前不起作用，仅在 android 和 ios 中具有部分支持。 caniuse.com/fileapi。要是就这么简单就好了…… 我想结果是以字节为单位的？ @ErdalG。好问题！ MDN 是missing 文档，但FileList.files 是File 对象的类数组，它是Glob 的扩展。而according to the spec、Glob 确实将size 属性定义为bytes 的数量（0 表示空文件）。所以是的，结果以字节为单位。【参考方案2】：

这是一个在上传前获取文件大小的简单示例。它使用 jQuery 来检测何时添加或更改内容，但您仍然可以在不使用 jQuery 的情况下获取files[0].size。

$(document).ready(function() 
  $('#openFile').on('change', function(evt) 
    console.log(this.files[0].size);
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
  <input id="openFile" name="img" type="file" />
</form>

这是一个更完整的示例，将一些概念验证代码发送到 Drag and Drop files into FormData 并通过 POST 上传到服务器。它包括一个简单的文件大小检查。

【讨论】：

【参考方案3】：

<script type="text/javascript">
function AlertFilesize()
    if(window.ActiveXObject)
        var fso = new ActiveXObject("Scripting.FileSystemObject");
        var filepath = document.getElementById('fileInput').value;
        var thefile = fso.getFile(filepath);
        var sizeinbytes = thefile.size;
    else
        var sizeinbytes = document.getElementById('fileInput').files[0].size;
    

    var fSExt = new Array('Bytes', 'KB', 'MB', 'GB');
    fSize = sizeinbytes; i=0;while(fSize>900)fSize/=1024;i++;

    alert((Math.round(fSize*100)/100)+' '+fSExt[i]);

</script>

<input id="fileInput" type="file" onchange="AlertFilesize();" />

在 IE 和 FF 上工作

【讨论】：

投了反对票，因为答案使用了 ActiveX。 2015 年，连微软都放弃了 ActiveX。虽然给出的建议是合理的，但我建议开发人员现在和将来避免这样做。我喜欢这个解决方案，因为只有旧版本的 IE 才会为 window.ActiveXObject 返回 true。 @scottstone 我不明白为什么您对所有支持旧版浏览器的答案都投了反对票？这个答案比使用浏览器指纹的答案要干净得多，并且绝不建议任何人使用 ActiveX。 @NicolasBouvrette - 我同意这个答案比其他答案要干净得多，但此时我无法删除反对票。最初的问题并没有要求与旧版本的 IE 兼容，这个答案也没有告诉读者大部分代码都支持 5 年以上的旧版本 IE。 @scottstone 实际上，我认为为什么不使用 ActiveX 的一个更具体的观点是，它会在 IE 中显示一条警告消息，这是一种可怕（可怕？）的用户体验。【参考方案4】：

我遇到了同样的问题，似乎我们还没有准确的解决方案。希望这可以帮助其他人。

经过一段时间的探索，我终于找到了答案。这是我使用 jQuery 获取文件附加的代码：

var attach_id = "id_of_attachment_file";
var size = $('#'+attach_id)[0].files[0].size;
alert(size);

这只是获取文件大小的示例代码。如果您想做其他事情，请随时更改代码以满足您的需求。

【讨论】：

我喜欢这个，因为它不需要像最流行的解决方案那样放在更改事件上。而且我也喜欢您允许我更改代码以满足我的需求的事实:)【参考方案5】：

适用于所有浏览器的最佳解决方案 ;)

function GetFileSize(fileid) 
    try 
        var fileSize = 0;
        // for IE
        if(checkIE())  //we could use this $.browser.msie but since it's deprecated, we'll use this function
            // before making an object of ActiveXObject, 
            // please make sure ActiveX is enabled in your IE browser
            var objFSO = new ActiveXObject("Scripting.FileSystemObject");
            var filePath = $("#" + fileid)[0].value;
            var objFile = objFSO.getFile(filePath);
            var fileSize = objFile.size; //size in b
            fileSize = fileSize / 1048576; //size in mb 
        
        // for FF, Safari, Opeara and Others
        else 
            fileSize = $("#" + fileid)[0].files[0].size //size in b
            fileSize = fileSize / 1048576; //size in mb 
        
        alert("Uploaded File Size is" + fileSize + "MB");
    
    catch (e) 
        alert("Error is :" + e);

来自http://www.dotnet-tricks.com/Tutorial/jquery/HHLN180712-Get-file-size-before-upload-using-jquery.html

更新： 我们将使用这个函数来检查它是否是IE浏览器

function checkIE() 
    var ua = window.navigator.userAgent;
    var msie = ua.indexOf("MSIE ");

    if (msie > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./))  
        // If Internet Explorer, return version number
        alert(parseInt(ua.substring(msie + 5, ua.indexOf(".", msie))));
     else 
        // If another browser, return 0
        alert('otherbrowser');
    

    return false;

【讨论】：

投了反对票，因为答案使用了 ActiveX。 2015 年，连微软都放弃了 ActiveX。虽然给出的建议是合理的，但我建议开发人员现在和将来避免这种情况。 —— $.browser 在 1.9 版中已从 jQuery 中删除（自 v 1.3 起已弃用）。 @scottstone 这是为了向后兼容，这不是真的微软不会放弃 ActiveX，它在很多方面都被广泛使用，这是证明computerworld.com/article/2481188/internet/… @SilvioDelgado 更改并更新了他们将 $.browser 删除到插件中，因此我们只需要对 IE 浏览器进行小测试（适用于所有版本）【参考方案6】：

$(document).ready(function() 
  $('#openFile').on('change', function(evt) 
    console.log(this.files[0].size);
  );
);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="upload.php" enctype="multipart/form-data" method="POST" id="uploadform">
  <input id="openFile" name="img" type="file" />
</form>

【讨论】：

【参考方案7】：

支持 HTML5 的浏览器具有用于输入类型的 files 属性。这当然不适用于较旧的 IE 版本。

var inpFiles = document.getElementById('#fileID');
for (var i = 0; i < inpFiles.files.length; ++i) 
    var size = inpFiles.files.item(i).size;
    alert("File Size : " + size);

【讨论】：

【参考方案8】：

请不要使用ActiveX，因为它可能会在 Internet Explorer 中显示可怕的警告消息并吓跑您的用户。

如果有人想实现此检查，他们应该只依赖现代浏览器中可用的FileList 对象，并且只依赖于旧浏览器的服务器端检查 (progressive enhancement)。

function getFileSize(fileInputElement)
    if (!fileInputElement.value ||
        typeof fileInputElement.files === 'undefined' ||
        typeof fileInputElement.files[0] === 'undefined' ||
        typeof fileInputElement.files[0].size !== 'number'
    ) 
        // File size is undefined.
        return undefined;
    

    return fileInputElement.files[0].size;

【讨论】：

【参考方案9】：

ucefkh 的解决方案效果最好，但是由于 $.browser 在 jQuery 1.91 中已被弃用，不得不更改为使用 navigator.userAgent：

function IsFileSizeOk(fileid) 
    try 
        var fileSize = 0;
        //for IE
        if (navigator.userAgent.match(/msie/i)) 
            //before making an object of ActiveXObject, 
            //please make sure ActiveX is enabled in your IE browser
            var objFSO = new ActiveXObject("Scripting.FileSystemObject");
            var filePath = $("#" + fileid)[0].value;
            var objFile = objFSO.getFile(filePath);
            var fileSize = objFile.size; //size in b
            fileSize = fileSize / 1048576; //size in mb 
        
        //for FF, Safari, Opeara and Others
        else 
            fileSize = $("#" + fileid)[0].files[0].size //size in b
            fileSize = fileSize / 1048576; //size in mb 
        
        return (fileSize < 2.0);
    
    catch (e) 
        alert("Error is :" + e);

【讨论】：

【参考方案10】：

您需要执行 ajax HEAD 请求来获取文件大小。使用 jquery 是这样的

  var req = $.ajax(
    type: "HEAD",
    url: yoururl,
    success: function () 
      alert("Size is " + request.getResponseHeader("Content-Length"));
    
  );

【讨论】：

但是如果该文件输入将清除（空）？可以举个例子吗谢谢【参考方案11】：

您可以使用 PHP 文件大小功能。在使用 ajax 上传时，请先通过向 php 脚本发出 ajax 请求来检查文件大小，该脚本会检查文件大小并返回值。

【讨论】：

【参考方案12】：

您可以使用 HTML5 文件 API：http://www.html5rocks.com/en/tutorials/file/dndfiles/

但是，对于旧版浏览器，您应该始终使用 PHP（或您使用的任何其他后端语言）。

【讨论】：

【参考方案13】：

就个人而言，考虑到 HTML 标准，我会说Web World's answer 是当今最好的。如果您需要支持 IE

在这种情况下，我已经成功使用了 3rd 方 JS 库，例如 plupload，它可以配置为使用 HTML5 api 或 Flash/Silverlight 控件来回填不支持这些的浏览器。 Plupload 有一个用于检查文件大小的客户端 API，适用于 IE

【讨论】：