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。