Question

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

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

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

Answer 1

这是我在一个非常相似的问题中的答案副本：How to check file input size with jQuery?

您实际上无权访问文件系统（例如读取和写入本地文件）。但是，由于HTML5文件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），我添加了here更多有关您应该知道的其他文件信息的详细信息和链接：{{3} }

旧浏览器支持

请注意旧版浏览器会为之前的null调用返回this.files值，因此访问this.files[0]会引发异常，您应该http://felipe.sabino.me/javascript/2012/01/30/javascipt-checking-the-file-size/才能使用它/ p>

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

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

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

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

9 个答案: