上传前获取文件大小

IT技术 javascript jquery ajax file-upload filesize
2021-02-06 20:06:22

在输入文件的更改事件中使用 AJAX/PHP 上传文件之前,有没有办法找出文件大小?

6个回答

对于下面的 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);

});

请参阅以下线程:

如何使用jQuery检查文件输入大小?

我想结果是字节?
2021-03-13 20:06:22
@ErdalG。好问题!MDN缺少文档,但它FileList.files是一个类似数组的File对象,它是Glob. 并且根据规范Glob确实将size属性定义字节(0 表示空文件)。所以是的,结果以字节为单位
2021-03-28 20:06:22
是的,这在 IE 10 之前不起作用,并且仅在 android 和 ios 中得到部分支持。caniuse.com/fileapi要是这么简单就好了……
2021-03-30 20:06:22
文件数组在 Internet Explorer(旧版本)上不存在吗?
2021-04-06 20:06:22

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

$(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>

这是一个更完整的示例,一些概念验证代码将文件拖放到 FormData并通过 POST 上传到服务器。它包括对文件大小的简单检查。

<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 上工作

@scottstone 我不明白你为什么不投票支持旧版浏览器的所有答案?这个答案比使用浏览器指纹的答案更清晰,绝不推荐任何人使用 ActiveX。
2021-03-11 20:06:22
我喜欢这个解决方案,因为只有旧版本的 IE 才会为 window.ActiveXObject 返回 true。
2021-03-26 20:06:22
@NicolasBouvrette - 我同意这个答案比其他答案更清晰,但此时我无法删除downvote。最初的问题并没有要求与旧版本的 IE 兼容,这个答案也没有告诉读者大部分代码都是为了支持 5 年以上的旧版本 IE。
2021-03-29 20:06:22
被否决,因为答案使用 ActiveX。2015年,就连微软也在放弃ActiveX。虽然这是一个合理的建议,但我建议开发人员现在和将来避免这种情况。
2021-04-03 20:06:22
@scottstone 实际上,从我的角度来看,为什么不使用 ActiveX 的一个更具体的观点是,它在 IE 中显示一条警告消息,这是一种可怕(可怕?)的用户体验。
2021-04-04 20:06:22

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

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

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

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

我喜欢这个,因为它不需要像最流行的解决方案那样放在更改事件上。而且我也喜欢您允许我更改代码以满足我的需求的事实:)
2021-04-02 20:06:22

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

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;
}
$.browser 在 1.9 版中从 jQuery 中删除(自 1.3 版起已弃用)。
2021-03-14 20:06:22
@SilvioDelgado 更改并更新他们将 $.browser 删除到插件中,因此我们只需要对 IE 浏览器进行一个小测试(适用于所有版本)
2021-03-14 20:06:22
被否决,因为答案使用 ActiveX。2015年,就连微软也在放弃ActiveX。虽然这是一个合理的建议,但我建议开发人员现在和将来避免这种情况。——
2021-03-21 20:06:22
@scottstone 这是为了向后兼容,这不是真的 Microsoft 不会放弃 ActiveX 它在许多事情中被大量使用,这里是证明computerworld.com/article/2481188/internet/...
2021-04-04 20:06:22