Javascript 上传前获取文件大小

在输入文件发生更改时使用AJAX/PHP上传文件之前，有没有办法确定文件大小？

对于下面的HTML文件

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

请参阅以下线程：

---

您可以使用PHP文件大小函数。在使用ajax上传期间，请首先通过向php脚本发出ajax请求来检查文件大小，该脚本检查文件大小并返回值。

您需要执行ajax HEAD请求以获取文件大小。对于jquery，它是这样的

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

---

您可以使用HTML5文件API：

但是，对于较旧的浏览器，PHP（或您使用的任何其他后端语言）应该始终具有回退功能。

<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();" />

函数AlertFilesize（）{
if（window.ActiveXObject）{
var fso=新的ActiveXObject（“Scripting.FileSystemObject”）；
var filepath=document.getElementById（'fileInput'）。值；
var thefile=fso.getFile（文件路径）；
var sizeinbytes=文件大小；
}否则{
var sizeinbytes=document.getElementById（'fileInput'）。文件[0]。大小；
}
var fSExt=新数组（'Bytes'，'KB'，'MB'，'GB'）；
fSize=sizeinbytes；i=0；而（fSize>900）{fSize/=1024；i++；}
警报（（数学圆整（fSize*100）/100）+''+fSExt[i]）；
}

---

在IE和FF上工作

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

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

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

---

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

适用于所有浏览器的最佳解决方案；）

从

更新： 我们将使用此功能检查它是否为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;
}

---

ucefkh的解决方案效果最好，但由于jQuery 1.91中不推荐使用$.browser，因此必须更改为使用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);
    }
}

函数IsFileSizeOk（fileid）{
试一试{
var fileSize=0；
//对于IE
if（navigator.userAgent.match（/msie/i））{
//在创建ActiveXObject的对象之前，
//请确保在IE浏览器中启用了ActiveX
var objFSO=新的ActiveXObject（“Scripting.FileSystemObject”）；
var filePath=$（“#”+fileid）[0]；
var objFile=objFSO.getFile（filePath）；
var fileSize=objFile.size；//大小以b为单位
fileSize=fileSize/1048576；//大小（mb）
}
//用于FF、Safari、Opeara和其他
否则{
fileSize=$（“#”+fileid）[0]。文件[0]。大小//以b为单位的大小
fileSize=fileSize/1048576；//大小（mb）
}
返回（文件大小<2.0）；
}
捕获（e）{
警报（“错误为：”+e）；
}
}

就个人而言，考虑到HTML标准，我认为这是目前最好的。如果需要支持IE<10，则需要使用某种形式的ActiveX。我会避免那些涉及针对Scripting.FileSystemObject编码或直接实例化ActiveX的建议

---

在这种情况下，我成功地使用了第三方JS库，例如可以配置为使用HTML5API或Flash/Silverlight控件来回填不支持这些的浏览器。Plupload有一个客户端API，用于检查IE<10中的文件大小。

下面是一个简单的例子，可以在上传之前获取文件大小。它使用jQuery来检测内容的添加或更改，但您仍然可以在不使用jQuery的情况下获取

文件[0].size

$（文档）.ready（函数（）{
$（'#openFile'）。on（'change'，function（evt）{
console.log（此.files[0].size）；
});
});
支持HTML5的浏览器具有输入类型的文件属性。
当然，这在旧的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);
}

var-inpFiles=document.getElementById（'#fileID'）；
对于（变量i=0；i
请不要使用
ActiveX
，因为它很可能会在Internet Explorer中显示一条可怕的警告消息，并吓跑您的用户


如果有人想要实现这种检查，他们应该只依赖于现代浏览器中可用的对象，而只依赖于旧浏览器中的服务器端检查（）


$（文档）.ready（函数（）{
$（'#openFile'）。on（'change'，function（evt）{
console.log（此.files[0].size）；
});
});

显然，internet explorer（旧版本）上不存在文件数组的可能副本吗？是的，这在IE 10之前不起作用，在android和ios中只有部分支持。如果只是这么简单……我想结果是以字节为单位的？@ErdalG。好问题！MDN是文档，但是
FileList.files
是一个类似
File
对象的数组，它是
Glob
的扩展。而且，
Glob
确实将
size
属性定义为字节数（空文件为0）。是的，结果是以字节为单位的。但如果这样做，文件输入将清除（空）？？你能举个例子吗？因为答案使用ActiveX。2015年，就连微软也放弃了ActiveX。虽然这是一个合理的建议，但我建议开发人员现在和将来都不要这样做。我喜欢这个解决方案，因为只有旧版本的IE才会在window.ActiveXObject中返回true。@scottstone我不明白为什么您否决了所有支持旧版浏览器的答案？这个答案比那些使用浏览器指纹的答案要干净得多，而且决不建议任何人使用ActiveX。@NicolasBouvrette-我同意这个答案比其他答案干净得多，但我现在不能取消反对票。最初的问题并没有要求与旧版本的IE兼容，这个答案也没有告诉读者大部分代码都是为了支持5+
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);
    }
}

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

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