50

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

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

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

4

9 回答 9

48

这是我在一个非常相似的问题中的答案的副本：如何使用 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），我在这里添加了更多详细信息和有关您应该知道的其他文件信息的链接：http: //felipe.sabino.me/javascript /2012/01/30/javascipt-checking-the-file-size/

旧浏览器支持

请注意，旧浏览器将返回null上一次调用的值this.files，因此访问this.files[0]会引发异常，您应该在使用之前检查文件 API 支持

于 2012-02-02T02:23:07.030 回答
8

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

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

于 2008-11-21T02:59:16.713 回答
6

我以这种方式尝试过，我在 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 库。

于 2011-03-26T19:22:53.653 回答
4

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

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

于 2008-11-21T03:31:44.120 回答
4

我发现 Apache2（您可能还想检查 Apache 1.5）有一种方法可以在上传之前通过将其放入 .htaccess 文件中来限制它：

限制请求体 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 表单插件之类的东西进行 AJAX 表单发布，您可以像这样捕获 H1 响应并显示错误结果。

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

Redirect 413 413.html

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

于 2008-11-21T04:27:04.680 回答
4 
 $(".jq_fileUploader").change(function () {
    var fileSize = this.files[0];
    var sizeInMb = fileSize.size/1024;
    var sizeLimit= 1024*10;
    if (sizeInMb > sizeLimit) {


    }
    else {


    }
  });
于 2014-09-09T06:05:02.750 回答
2

正如其他人所说，由于 JavaScript 的安全模型，仅使用 JavaScript 是不可能的。

如果可以的话，我会推荐以下解决方案之一。两者都使用 Flash 组件进行客户端验证；但是，使用 Javascript/jQuery 进行连接。两者都工作得很好，可以与任何服务器端技术一起使用。

http://www.uploadify.com/

http://swfupload.org/

于 2009-10-30T21:31:32.640 回答
1

试试下面的代码：

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;
}
于 2018-08-06T11:13:22.757 回答
0

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

list($width, $height, $type, $attr) = getimagesize("img/flag.jpg");
echo "<img src=\"img/flag.jpg\" $attr alt=\"getimagesize() example\" />";
于 2010-07-14T03:11:46.133 回答