最近在項目中遇到上傳文件，對上傳文件的大小需要進行限制，這裏學習和整理了一下一些常規的文件大小限制的方法。

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。

web文件上傳大小限制