上传前获取文件大小

Nis*_*mar 82 javascript ajax jquery file-upload filesize

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

Bri*_*rij 125

对于HTML轰鸣声

<input type="file" id="myFile" />
Run Code Online (Sandbox Code Playgroud)

尝试以下方法:

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

});
Run Code Online (Sandbox Code Playgroud)

见以下主题:

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

  • 是的,这在IE 10之前不起作用,只在android和ios中有部分支持.http://caniuse.com/fileapi.如果只是这么容易...... (4认同)
  • @ErdalG.好问题!MDN [缺失](https://developer.mozilla.org/en-US/docs/Web/API/File/size)文档,但`FileList.files`是一个类似于`File`对象的数组,这是`Glob`的延伸.并且[根据规范](https://w3c.github.io/FileAPI/#attributes-blob),`Glob`确实将`size`属性定义为_bytes_的数量(0表示空文件).所以是的,**结果以字节为单位**. (4认同)
  • 我想结果是以字节为单位的? (2认同)

小智 14

<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();" />
Run Code Online (Sandbox Code Playgroud)

在IE和FF上工作

  • downvoted,因为答案使用ActiveX.在2015年,甚至微软也放弃了ActiveX.虽然这是一个合理的建议,但我建议开发人员现在和将来都要避免这种情况. (13认同)
  • 我喜欢这个解决方案,因为只有旧版本的IE将为window.ActiveXObject返回true. (3认同)
  • @scottstone我不明白为什么你否决了所有支持旧版浏览器的答案?这个答案比使用浏览器指纹的答案干净得多,并且绝不建议任何人使用 ActiveX。 (3认同)

jag*_*oft 13

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

$(document).ready(function() {
  $('#openFile').on('change', function(evt) {
    console.log(this.files[0].size);
  });
});
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

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


uce*_*fkh 8

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

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);
    }
}
Run Code Online (Sandbox Code Playgroud)

来自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;
}
Run Code Online (Sandbox Code Playgroud)

  • downvoted,因为答案使用ActiveX.在2015年,甚至微软也放弃了ActiveX.虽然这是一个合理的建议,但我建议开发人员现在和将来都要避免这种情况. - (3认同)
  • @scottstone这是为了向后兼容,这不是真的微软不会abdon ActiveX它在许多方面被广泛使用,这里是证明http://www.computerworld.com/article/2481188/internet/why-microsoft-赢得叔放弃-互联网explorer.html (2认同)

小智 8

$(document).ready(function() {
  $('#openFile').on('change', function(evt) {
    console.log(this.files[0].size);
  });
});
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)


Hoa*_* Le 7

我有同样的问题,似乎我们没有一个准确的解决方案.希望这可以帮助其他人.

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

var attach_id = "id_of_attachment_file";
var size = $('#'+attach_id)[0].files[0].size;
alert(size);
Run Code Online (Sandbox Code Playgroud)

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