web文件上传大小限制

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

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。