上传前获取文件大小

Question

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

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

});

请参阅以下线程：

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

Answer 2

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

Answer 3

这是一个在上传之前获取文件大小的简单示例。它使用 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>

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

Answer 4

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

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

Answer 5

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

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

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

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

Answer 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>

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

Answer 8

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

如果有人想实现此检查，他们应该只依赖 FileList 对象在现代浏览器中可用，仅对旧版浏览器依赖服务器端检查 (渐进增强）。

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

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

Answer 10

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

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

Answer 11

通过files.item(i).size获取文件的大小。

你应该尝试这个。
https://www.geeksforgeeks.org /使用-javascript-jquery上传时验证文件大小/

Answer 12

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

Answer 13

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

但是，您应该始终为旧版浏览器提供 PHP（或您使用的任何其他后端语言）的后备方案。

Answer 14

就我个人而言，考虑到 HTML 标准，我认为 网络世界的答案 是当今最好的答案。如果您需要支持IE< 10、您将需要使用某种形式的ActiveX。我会避免涉及针对 Scripting.FileSystemObject 进行编码或直接实例化 ActiveX 的建议。

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