多文件上傳組件FineUploader使用心得

        作Web開發的童鞋都知道，須要常常從客戶端上傳文件到服務端，固然，你可使用<input type="file"/>來上傳文件，這是Asp.Net默認的上傳文件元素。可是，受到系統的限制，若是要更改file元素的樣式，讓他看起來美觀一些，這就比較費勁了，固然多是本人css功夫沒到家吧，總之試了幾回，也沒能達到想要的效果。最終，就決定用第三方插件吧。因爲項目組成員以前都用的是FileUploader，因此就堅決果斷的拿來用了一下。

         先附上一張總體的佈局以及FileUpload呈現的效果。

      腳本引進來以後，就能夠建立FileUploader對象了。本文主要說此次使用過程當中遇到的問題，具體用法就不細說了。具體用法這位哥兒們說的很是詳細了，Fine Uploader。

      在上傳過程當中，我發現一個很是奇怪的現象，上傳較小一點的文件，一點問題都沒有，很是順利，但是在我偶然上傳了一個稍微大一點的文件（50M），這時候就出現問題了，這時候會一直在那裏轉圈，進度一直都是0%，這樣反覆了幾回，我發現當上傳不超過24M左右的文件時，都沒有問題，但是一旦超過了，就出現上述的問題，上傳就停止了。因爲上傳文件只是大小不同致使的問題，因此確定是哪裏作了限制致使了這個問題。檢查了一遍程序，發現有兩個地方對文件的大小作了限制，一個是配置文件中作了以下的配置：

 <httpRuntime requestValidationMode="2.0" executionTimeout="90" maxRequestLength="2147483" useFullyQualifiedRedirectUrl="false" minFreeThreads="8" minLocalRequestFreeThreads="4" appRequestQueueLimit="100" />

View Code

       但是配置文件此處文件大小是以K爲單位的，意思就是此處限制的大小爲2147483/1024=2097M,約爲2個G，遠遠大於24M，因此應該不是此處引發的問題。而後我又看了一下腳本中上傳文件時的限制，FineUploader自己也能夠對文件的後綴和文件的大小作限制，經過以下配置：

  validation:   {  
allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'], 
sizeLimit: 1048576 // 100 M = 100 * 1024 bytes*1024   
}

View Code

      在這裏對大小作了100M的控制，因此分析了一下也不多是這裏引發的問題，那麼會使哪裏引發的問題呢？

      我再次拿了一個50M的文件試了一下，仍然上傳不成功，此次我打開了Chrome的調試工具，看了一下Request信息和Response信息，注意，這裏有些CHrome版本可能看不到此錯誤信息。"HTTP Error 404.13 - Not Found「，對，竟然是404！咱們都知道404錯誤是未找到請求的頁面，那麼這裏怎麼會報這個錯誤呢？因而Google了一下，原來不少人出現過這個問題：緣由就是上傳文件過大。這是原帖，有興趣的童鞋能夠看一下。既然知道了出錯的緣由，那麼解決起來也就不難了，在Web Config裏添加以下的配置：

<system.webServer>
   <modules runAllManagedModulesForAllRequests="true"/>         <security>
 <requestFiltering> 
<requestLimits maxAllowedContentLength="512000"></requestLimits> 
</requestFiltering>
 </security> 
</system.webServer> 

View Code

      至此，問題解決。寫這篇文章的目的有兩個：一，若是你遇到了這個問題，能夠很快的幫你解決問題；二，但願你們能一塊兒學習，學習解決問題的能力！說到這裏，想起了他人的一句名言：方法總比問題多！只要肯思考，總會有解決的辦法的！