JavaScriptfile upload大小validation
在使用JavaScript上传文件之前，有没有办法检查文件大小 ？
是的 ，W3C有一个新function，它受到一些现代浏览器File API的支持。 它可以用于这个目的，并且很容易testing它是否被支持，如果不是，则会退回到另一个机制（如果需要的话）。
这是一个完整的例子：
<!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> 这是在行动。 尝试使用最新版本的Chrome或Firefox。
稍微偏离主题，但是：请注意，客户端validation不能替代服务器端validation。 客户端validation纯粹是为了提供更好的用户体验。 例如，如果您不允许上传大于5MB的文件，则可以使用客户端validation来检查用户select的文件大小不超过5MB，并且如果它是（所以他们不会花费所有时间上传，只是为了得到在服务器上扔掉的结果），但是你也必须在服务器上强制执行这个限制，因为所有的客户端限制（以及其他validation）都可以被规避。
使用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>
否是，在较新的浏览器中使用File API。 有关详细信息，请参阅TJ的答案。
如果您还需要支持较旧的浏览器，则必须使用基于Flash的上传程序（如SWFUpload或Uploadify）来执行此操作。
SWFUploadfunction演示显示file_size_limit设置如何工作。
请注意，这（显然）需要Flash，加上它的工作方式是有点不同于普通的上传forms。
如果你使用jQueryvalidation，你可以写这样的东西：
$.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.' );
这很简单。
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; }
我使用了一个在Mozilla开发者networking站点https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications中find的主要Javascript函数，以及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>
干杯
适用于dynamic和静态文件元素（FileSize方法是非标准function，自从Gecko 7.0以后不推荐使用。
仅Javascript解决scheme
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">
即使这个问题是回答，我想发布我的答案。 可能对未来的观众来说很方便。你可以像下面的代码一样使用它。
<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"); } }
你可以试试这个优秀的上传器
它可以在IE6（和avove），Chrome或Firefox下正常工作
在这个线程提供的JQuery示例是非常过时的，谷歌没有帮助，所以这里是我的修订：
<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>
如果您将“文档模式”设置为“标准”，则可以使用简单的JavaScript“大小”方法来获取上传文件的大小。
将“文档模式”设置为“标准”：
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
比使用'size'javascript方法获取上传文件的大小：
<script type="text/javascript"> var uploadedFile = document.getElementById('imageUpload'); var fileSize = uploadedFile.files[0].size; alert(fileSize); </script>
它适用于我。
