使用jQuery，在上传之前限制文件大小

Question

在PHP上，他们有一种方法可以在上传后限制文件大小，但不能在上传之前。 我使用Malsup jQuery Form Plugin进行表单发布，它支持图像文件发布。

我想知道是否有一个限制，我可以设置多少字节可以通过AJAX流直到服务器？ 这可以允许我检查文件大小并在文件太大时返回错误。

通过在客户端执行此操作，它阻止那些从他们的Pentax拍摄10MB照片并尝试上传的新手。

Answer 1

这是我在一个非常相似的问题中回答的副本： 如何使用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]将引发异常，您应该在使用它之前检查File API支持

Answer 2

除非你使用flash，activex或java上传器，否则我认为这是不可能的。

出于安全原因，在上载之前或期间，不允许ajax / javascript访问文件流或文件属性。

Answer 3

我试过这种方式，我在IE *中获得结果，而Mozilla 3.6.16，没有检查旧版本。

<img id="myImage" src="" style="display:none;"><br>
<button onclick="findSize();">Image Size</button>
<input type="file" id="loadfile" />
<input type="button" value="find size" onclick="findSize()" />
<script type="text/javascript">
function findSize() {
    if ( $.browser.msie ) {
       var a = document.getElementById('loadfile').value;
           $('#myImage').attr('src',a);
           var imgbytes = document.getElementById('myImage').size;
           var imgkbytes = Math.round(parseInt(imgbytes)/1024);
           alert(imgkbytes+' KB');
    }else {
           var fileInput = $("#loadfile")[0];
           var imgbytes = fileInput.files[0].fileSize; // Size returned in bytes.
           var imgkbytes = Math.round(parseInt(imgbytes)/1024);
                   alert(imgkbytes+' KB');
     }
}    
</script>

另外添加Jquery库。

Answer 4

我遇到了同样的问题。 您必须使用ActiveX或Flash（或Java）。 好处是它不一定是侵入性的。 我有一个简单的ActiveX方法，它将返回要上传的文件的大小。

如果你使用Flash，你甚至可以做一些花哨的js / css来定制上传体验 - 只使用Flash（作为1x1“电影”）来访问它的文件上传功能。

Answer 5

我发现Apache2（您可能还要查看Apache 1.5）有一种方法可以在上传之前将其限制在.htaccess文件中：

LimitRequestBody 2097152

这会将文件上传限制为2兆字节（2 * 1024 * 1024）（如果我正确地进行了字节数学运算）。

请注意，当您执行此操作时，如果您在表单帖子或获取请求上超出此限制，Apache错误日志将生成此条目：

Requested content-length of 4000107 is larger than the configured limit of 2097152

它还会在Web浏览器中显示此消息：

<h1>Request Entity Too Large</h1>

所以，如果你正在使用类似Malsup jQuery Form Plugin的AJAX表单帖子，你可以像这样捕获H1响应并显示错误结果。

顺便说一句，返回的错误号是413.所以，您可以在.htaccess文件中使用指令，如...

Redirect 413 413.html

...并提供更优雅的错误结果。

Answer 6

 $(".jq_fileUploader").change(function () {
    var fileSize = this.files[0];
    var sizeInMb = fileSize.size/1024;
    var sizeLimit= 1024*10;
    if (sizeInMb > sizeLimit) {


    }
    else {


    }
  });

Answer 7

就像其他人所说的那样，由于这种安全模型，只有JavaScript是不可能的。

如果你能够，我建议使用以下解决方案之一。其中两个使用闪存组件进行客户端验证; 但是，使用Javascript / jQuery连线。 两者都运行良好，可以与任何服务器端技术一起使用。

http://www.uploadify.com/

http://swfupload.org/

Answer 8

无法在客户端验证图像大小，宽度或高度。 您需要在服务器上上传此文件并使用PHP来验证所有这些信息。 PHP具有以下特殊功能： getimagesize()

list($width, $height, $type, $attr) = getimagesize("img/flag.jpg");
echo "<img src=\"img/flag.jpg\" $attr alt=\"getimagesize() example\" />";

Answer 9

试试以下代码：

var sizeInKB = input.files[0].size/1024; //Normally files are in bytes but for KB divide by 1024 and so on
var sizeLimit= 30;

if (sizeInKB >= sizeLimit) {
    alert("Max file size 30KB");
    return false;
}