web文件上传大小限制

Posted 2020-10-25 yangAL

最近在项目中遇到上传文件，对上传文件的大小需要进行限制，这里学习和整理了一下一些常规的文件大小限制的方法。

1. 一般分为两种方式，一种是服务器端判断文件大小进行限制，这种方法的存在明显的缺陷，当用户过多后，数据上传到服务器之后，在对其进行监测，大大增加了宽带和服务器的压力。

2. 另一种是放在前端进行大小监测， 这种方式提前进行监测，可以有效减小服务器的压力。

3. 当上传的文件过大之后，可以使用百度开发的文件上传插件 WebUploader,或者另一个文件上传插件Plupload。

下面分别介绍两种方式：

###服务器端限制###

1. 在nginx上进行配置参数clinet_max_body_size=20m;默认为1m,

2. 在apache服务器下添加 LimitRequestBody=20m默认没有限制。

3. 在php.ini中限制分别设置以下参数：

   file_uploads = on ;是否允许通过HTTP上传文件的开关。默认为ON即是开
   upload_tmp_dir ;文件上传至服务器上存储临时文件的地方，如果没指定就会用系统默认的临时文件夹
   upload_max_filesize = 8m ;望文生意，即允许上传文件大小的最大值。默认为2M 
   post_max_size = 8m ;指通过表单POST给PHP的所能接收的最大值，包括表单里的所有值。默认为8M 
   一般地，设置好上述四个参数后，上传<=8M的文件是不成问题，在网络正常的情况下。

但如果要上传>8M的大体积文件，只设置上述四项还一定能行的通。除非你的网络真有100M/S的上传高速，否则你还得关心关心下面的参数 
max_execution_time = 600 ;每个PHP页面运行的最大时间值(秒)，默认30秒 
max_input_time = 600 ;每个PHP页面接收数据所需的最大时间，默认60秒 
memory_limit = 8m ;每个PHP页面所吃掉的最大内存，默认8M

1. 在ASP中配置Web.config文件的httpRuntime

httpRuntime 

<httpRuntime executionTimeout="90" maxRequestLength="40960" useFullyQualifiedRedirectUrl="false"
minFreeThreads="8" minLocalRequestFreeThreads="4" appRequestQueueLimit="100" enableVersionHeader="false"/>

httpRuntime是配置asp.net http运行时设置，以确定如何处理对asp.net应用程序的请求。

 executionTimeout:表示允许执行请求的最大时间限制，单位为秒
 maxRequestLength：指示 ASP.NET 支持的最大文件上载大小。该限制可用于防止因用户将大量文件传递到该服务器而导致的拒绝服务攻击。指定的大小以 KB 为单位。默认值为 4096 KB (4 MB)。
 useFullyQualifiedRedirectUrl：表示指示客户端重定向是否是完全限定的（采用 "http://server/path" 格式，这是某些移动控件所必需的），或者指示是否代之以将相对重定向发送到客户端。如果为 True，则所有不是完全限定的重定向都将自动转换为完全限定的格式。false 是默认选项。
 minFreeThreads：表示指定允许执行新请求的自由线程的最小数目。ASP.NET 为要求附加线程来完成其处理的请求而使指定数目的线程保持自由状态。默认值为 8。
minLocalRequestFreeThreads：表示ASP.NET 保持的允许执行新本地请求的自由线程的最小数目。该线程数目是为从本地主机传入的请求而保留的，以防某些请求在其处理期间发出对本地主机的子请求。这避免了可能的因递归重新进入 Web 服务器而导致的死锁。
appRequestQueueLimit：表示ASP.NET 将为应用程序排队的请求的最大数目。当没有足够的自由线程来处理请求时，将对请求进行排队。当队列超出了该设置中指定的限制时，将通过“503 - 服务器太忙”错误信息拒绝传入的请求。
enableVersionHeader：表示指定 ASP.NET 是否应输出版本标头。Microsoft Visual Studio 2005 使用该属性来确定当前使用的 ASP.NET 版本。对于生产环境，该属性不是必需的，可以禁用。    

前端限制

1. 兼容IE浏览器,使用了ActiveX,或者也可以使用flash来兼容

<input type="file" style="width:500px;" onchange="fileChange(this);">
// 判断是否为IE浏览器： /msie/i.test(navigator.userAgent) 为一个简单正则
        var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
        function fileChange(target){
            var fileSize = 0;
            if (isIE && !target.files) {    // IE浏览器
                var filePath = target.value; // 获得上传文件的绝对路径
                /**
                 * ActiveXObject 对象为IE和Opera所兼容的JS对象
                 * 用法：
                 *         var newObj = new ActiveXObject( servername.typename[, location])
                 *         其中newObj是必选项。返回 ActiveXObject对象 的变量名。
                 *        servername是必选项。提供该对象的应用程序的名称。
                 *        typename是必选项。要创建的对象的类型或类。
                 *        location是可选项。创建该对象的网络服务器的名称。
                 *\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\                 *     Scripting.FileSystemObject 为 IIS 内置组件，用于操作磁盘、文件夹或文本文件，
                 *    其中返回的 newObj 方法和属性非常的多
                 *    如：var file = newObj.CreateTextFile("C:\test.txt", true) 第二个参表示目标文件存在时是否覆盖
                 *    file.Write("写入内容");    file.Close();
                 */
                var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
                // GetFile(path) 方法从磁盘获取一个文件并返回。
                var file = fileSystem.GetFile(filePath);
                fileSize = file.Size;    // 文件大小，单位：b
            }
            else {    // 非IE浏览器
                fileSize = target.files[0].size;
            }
            var size = fileSize / 1024 / 1024;
            if (size > 1) {
                alert("附件不能大于1M");
            }
        }

1. 在html5中不仅支持获取上传文件大小，还支持多文件同时上传：

<input type="file" multiple="multiple" onchange="checkinfo(this)">
<script>
function checkinfo(obj){
    var len = obj.files.length;

    var text="";
    for (var i =0 ; i < len ; i++){
            text += "文件:"+obj.files[i].name+" ,大小:"+obj.files[i].size+"字节\n";
    }
    console.log(text);
}
</script>

在file类型的input中增加multiple属性，即可上传多个文件，而不必通过增加input框的个数来增加上传文件数量的限制。而对于file类型的对象，HTML5增加了一个FileList接口，让访问<input type="file">元素选中的文件列表成为可能，它还可以应用于用drag和drop API获取拖拽到web页面的文件列表。它有item, length等属性。更加详细的介绍，File API。

利用HTML5，不仅可以获取文件大小，还可以进行本地图片预览：

<input type="file" multiple="multiple" onchange="checkinfo(this)">
<div id="win"></div>
<script>
function checkinfo(obj){
    var len = obj.files.length;
    for (var i =0 ; i < len ; i++){
            showimg(obj.files[i]);
    }
}

function showimg(img){
    var a = new FileReader();
    a.readAsDataURL(img);
    a.onload=function(){
        var img = new Image();
        img.src=a.result;
        document.getElementById(‘win‘).appendChild(img);
    }
}

</script>

这里用到FlieReader这个文件API，它可以让web应用异步的加载本地的文件或者内容，它用来操作File或者Bob对象，可以查看FileReader API。