代码之家 › 专栏 › 技术社区 › ArK Sheeba Nancy

javascript文件上载大小验证

file-upload validation javascript

221

ArK Sheeba Nancy · 技术社区 · 14 年前

有什么办法检查吗 文件大小 在使用javascript上传之前?

12 回复 | 直到 14 年前

284

T.J. Crowder 12 年前

是的 W3C的一个新功能得到了一些现代浏览器的支持, File API 。它可以用于此目的,并且很容易测试它是否被支持,如果不被支持,它是否会退回到另一个机制(如果需要)。

下面是一个完整的例子:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Show File Data</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
</style>
<script type='text/javascript'>
function showFileSize() {
    var input, file;

    // (Can't use `typeof FileReader === "function"` because apparently
    // it comes back as "object" on some browsers. So just see if it's there
    // at all.)
    if (!window.FileReader) {
        bodyAppend("p", "The file API isn't supported on this browser yet.");
        return;
    }

    input = document.getElementById('fileinput');
    if (!input) {
        bodyAppend("p", "Um, couldn't find the fileinput element.");
    }
    else if (!input.files) {
        bodyAppend("p", "This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!input.files[0]) {
        bodyAppend("p", "Please select a file before clicking 'Load'");
    }
    else {
        file = input.files[0];
        bodyAppend("p", "File " + file.name + " is " + file.size + " bytes in size");
    }
}

function bodyAppend(tagName, innerHTML) {
    var elm;

    elm = document.createElement(tagName);
    elm.innerHTML = innerHTML;
    document.body.appendChild(elm);
}
</script>
</head>
<body>
<form action='#' onsubmit="return false;">
<input type='file' id='fileinput'>
<input type='button' id='btnLoad' value='Load' onclick='showFileSize();'>
</form>
</body>
</html>

及 here 它正在运作。尝试使用最新版本的Chrome或Firefox。

稍微偏离主题,但是:注意客户端验证是 没有替代品 用于服务器端验证。客户端验证纯粹是为了提供更好的用户体验。例如,如果你不允许上传超过5MB的文件,你可以使用客户端验证来检查用户选择的文件大小是否不超过5MB,如果是的话,给他们一个友好的消息(这样他们就不会花费所有的时间上传,只会把结果扔掉)。在服务器上),但您必须也在服务器上强制执行该限制,因为可以绕过所有客户端限制(和其他验证)。

105

ipd 10 年前

使用jquery:

<form action="upload" enctype="multipart/form-data" method="post">

    Upload image:
    <input id="image-file" type="file" name="file" />
    <input type="submit" value="Upload" />

    <script type="text/javascript">
        $('#image-file').bind('change', function() {
            alert('This file size is: ' + this.files[0].size/1024/1024 + "MB");
        });
    </script>

</form>

Arun Prasad E S 6 年前

适用于动态和静态文件元素

javascript 唯一的解决方案

function ValidateSize(file) {
        var FileSize = file.files[0].size / 1024 / 1024; // in MB
        if (FileSize > 2) {
            alert('File size exceeds 2 MB');
           // $(file).val(''); //for clearing with Jquery
        } else {

        }
    }

 <input onchange="ValidateSize(this)" type="file">

Pekka 12 年前

不是的,在更新的浏览器中使用文件API。详情请参见TJ的回答。

如果你也需要支持旧的浏览器,你将不得不使用一个基于flash的上传程序,比如 SWFUpload 或 Uploadify 这样做。

这个 SWFUpload Features Demo 显示了 file_size_limit 设置工作。

请注意,这(显然)需要flash,加上它的工作方式与正常的上传表单有点不同。

Hasan Tuna Oruç 9 年前

很简单。

            var oFile = document.getElementById("fileUpload").files[0]; // <input type="file" id="fileUpload" accept=".jpg,.png,.gif,.jpeg"/>

            if (oFile.size > 2097152) // 2 mb for bytes.
            {
                alert("File size must under 2mb!");
                return;
            }

Arsen K. pastullo 8 年前

如果您使用的是jquery验证,那么可以编写如下内容:

$.validator.addMethod(
    "maxfilesize",
    function (value, element) {
        if (this.optional(element) || ! element.files || ! element.files[0]) {
            return true;
        } else {
            return element.files[0].size <= 1024 * 1024 * 2;
        }
    },
    'The file size can not exceed 2MB.'
);

Jose Gaspar 11 年前

我使用了我在Mozilla开发者网站上找到的一个主要的javascript函数 https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications 以及另一个使用Ajax的函数,并根据需要进行了更改。它接收一个关于HTML代码中要写入文件大小的位置的文档元素ID。

<Javascript>

function updateSize(elementId) {
    var nBytes = 0,
    oFiles = document.getElementById(elementId).files,
    nFiles = oFiles.length;

    for (var nFileId = 0; nFileId < nFiles; nFileId++) {
        nBytes += oFiles[nFileId].size;
    }
    var sOutput = nBytes + " bytes";
    // optional code for multiples approximation
    for (var aMultiples = ["K", "M", "G", "T", "P", "E", "Z", "Y"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
        sOutput = " (" + nApprox.toFixed(3) + aMultiples[nMultiple] + ")";
    }

    return sOutput;
}
</Javascript>

<HTML>
<input type="file" id="inputFileUpload" onchange="uploadFuncWithAJAX(this.value);" size="25">
</HTML>

<Javascript with XMLHttpRequest>
document.getElementById('spanFileSizeText').innerHTML=updateSize("inputFileUpload");
</XMLHttpRequest>

干杯

Lemon Kazi 9 年前

即使这个问题得到了回答,我还是想把我的答案贴出来。可能对未来的观众有用。您可以像下面的代码一样使用它。

<input type="file" id="fileinput" />
<script type="text/javascript">
  function readSingleFile(evt) {
    //Retrieve the first (and only!) File from the FileList object
    var f = evt.target.files[0]; 
    if (f) {
      var r = new FileReader();
      r.onload = function(e) { 
          var contents = e.target.result;
        alert( "Got the file.n" 
              +"name: " + f.name + "n"
              +"type: " + f.type + "n"
              +"size: " + f.size + " bytesn"
              + "starts with: " + contents.substr(1, contents.indexOf("n"))
        ); 
        if(f.size > 5242880) {
               alert('File size Greater then 5MB!');
                }


      }
      r.readAsText(f);
    } else { 
      alert("Failed to load file");
    }
  }

nodws 7 年前

这个线程中提供的jquery示例非常过时,而google根本没有帮助,所以我的修订如下:

 <script type="text/javascript">
        $('#image-file').on('change', function() {
            console.log($(this)[0].files[0].name+' file size is: ' + $(this)[0].files[0].size/1024/1024 + 'Mb');
        });
    </script>

anson 12 年前

你可以试试这个 fineuploader

它在IE6(和Avove)、Chrome或Firefox下工作正常

kibus90 6 年前

我做了这样的东西:

$('#image-file').on('change', function() {
 var numb = $(this)[0].files[0].size/1024/1024;
numb = numb.toFixed(2);
if(numb > 2){
alert('to big, maximum is 2MB');
} else {
alert('it okey, your file has ' + numb + 'MB')
}
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="file" id="image-file">

-2

Lilla 11 年前

如果将IE“文档模式”设置为“标准”,则可以使用简单的javascript“大小”方法获取上载文件的大小。

将IE“文档模式”设置为“标准”:

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

然后,使用“大小”javascript方法获取上载文件的大小:

<script type="text/javascript">
    var uploadedFile = document.getElementById('imageUpload');
    var fileSize = uploadedFile.files[0].size;
    alert(fileSize); 
</script>

它对我有用。