如何检查与jQuery的文件input大小？
我有一个file uploadfunction的表单，我希望能够有一个很好的客户端错误报告，如果用户试图上传的文件太大，有没有办法检查与jQuery的文件大小，要么纯粹在客户端或以某种方式张贴文件回服务器检查？
您实际上无法访问文件系统（例如读取和写入本地文件），但是，由于HTML5 File Api规范，您可以访问某些文件属性，文件大小就是其中之一。
对于下面的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); });
由于它是HTML5规范的一部分，它只适用于现代浏览器（IE所需的v10），我在这里添加了更多的细节和关于其他文件信息的链接，你应该知道： http : //felipe.sabino.me/javascript / 2012/01/30 / javascipt的检查的所述文件尺寸/
旧的浏览器支持
请注意，旧的浏览器将返回以前的this.files调用为null值，所以访问this.files[0]将引发一个exception，你应该使用它之前检查文件API的支持
如果你想使用jQuery的validate你可以通过创build这个方法：
$.validator.addMethod('filesize', function(value, element, param) { // param = size (en bytes) // element = element to validate (<input>) // value = value of the element (file name) return this.optional(element) || (element.files[0].size <= param) });
你会使用它：
$('#formid').validate({ rules: { inputimage: { required: true, accept: "png|jpe?g|gif", filesize: 1048576 }}, messages: { inputimage: "File must be JPG, GIF or PNG, less than 1MB" } });
此代码：
$("#yourFileInput")[0].files[0].size;
返回表单input的文件大小。
在FF 3.6及更高版本中，这个代码应该是：
$("#yourFileInput")[0].files[0].fileSize;
我也发布我的解决scheme，用于ASP.NET FileUpload控件。 也许有人会觉得它有用。
$(function () { $('<%= fileUploadCV.ClientID %>').change(function () { //because this is single file upload I use only first index var f = this.files[0] //here I CHECK if the FILE SIZE is bigger than 8 MB (numbers below are in bytes) if (f.size > 8388608 || f.fileSize > 8388608) { //show an alert to the user alert("Allowed file size exceeded. (Max. 8 MB)") //reset file upload control this.value = null; } }) });
您可以使用Flash或Silverlight进行此类检查，但不能使用Javascript。 javascript沙箱不允许访问文件系统。 大小检查在上传完成后需要在服务器端进行。
如果你想要去Silverlight / Flash的路线，你可以检查，如果他们没有安装默认的常规file upload处理程序，使用正常的控制。 这样，如果安装了Silverlight / Flash，他们的体验将会更丰富一些。
<form id="uploadForm" class="disp-inline" role="form" action="" method="post" enctype="multipart/form-data"> <input type="file" name="file" id="file"> </form> <button onclick="checkSize();"></button> <script> function checkSize(){ var size = $('#uploadForm')["0"].firstChild.files["0"].size; console.log(size); } </script>
我发现这是最简单的，如果你不打算通过标准的ajax / html5方法提交表单，但当然它适用于任何事情。
笔记：
var size = $('#uploadForm')["0"]["0"].files["0"].size;
这曾经工作，但它不再在铬，我只是testing了上面的代码，它在ff和铬（最新）工作。 第二个[“0”]现在是firstChild。
