ASP.NET 使用js插件出現上傳較大檔案失敗的解決方法（ajaxfileupload.js第一彈）

在寫這篇的時候本來想把标題直接寫成報錯的提示，如下：

但是有點長，會顯示不全，就想還是換一下吧，想了一下

“ASP.NET 上傳過大圖檔或檔案報錯解決辦法”，

然後當我寫完這個題目之後，我覺得這篇文章好像根本沒有寫的必要，估計看完題目就會想到關于web.config配置的方面了。但是想寫的内容真的不是那麼“單純”的，畢竟是花了自己幾個小時去研究的啊~~是以又想了一下，變成了現在的這個題目，就是想和大家分享一下。

那言歸正傳了。

先上一下報錯的提示截圖：

先提示

<a href="http://s3.51cto.com/wyfs02/M02/48/86/wKioL1QJSImzRuCeAACB2ER0i9w500.jpg" target="_blank"></a>

後提示

是這樣的，在網上下載下傳了一個ajaxfileupload.js插件，用于無重新整理上傳圖檔使的，然後就按照demo的例子去運作了一下，上傳啊什麼的都OK，但是正好上傳的示例圖檔有一個比較大的，4M，5M的樣子，然後上傳就會報上面的錯誤。

單純看我的描述，明顯發現就是圖檔較大的原因，可能很快就會想到web.config的配置問題上，但是當我是當局者的時候，就沒有那麼靈光了，因為有提示錯誤，就有去百度一下，結果查到是什麼“跨域調函數”的問題，至此，這個問題我探究的方向已經走偏。

雖然問題提示當中沒有明顯的說出是跟上傳圖檔的大小有關系，但是這個問題确實是因為沒有設定上傳檔案的大小，而asp.net的預設上傳檔案大小是2M

我先把解決方法告訴大家，就是在Web.config的&lt;system.web&gt;中加上下面這段

1

2

3

4

5

6

7

<code>&lt;</code><code>httpRuntime</code> <code>maxRequestLength</code><code>=</code><code>"4096"</code>

<code>    </code><code>useFullyQualifiedRedirectUrl</code><code>=</code><code>"true"</code>

<code>    </code><code>executionTimeout</code><code>=</code><code>"6000"</code>

<code>    </code><code>minFreeThreads</code><code>=</code><code>"8"</code>

<code>    </code><code>minLocalRequestFreeThreads</code><code>=</code><code>"4"</code>

<code>    </code><code>appRequestQueueLimit</code><code>=</code><code>"100"</code>

<code>    </code><code>enableVersionHeader</code><code>=</code><code>"true"</code> <code>/&gt;</code>

說明：

<a href="http://s3.51cto.com/wyfs02/M02/48/86/wKioL1QJSNjyjzUYAAegINuoGVw046.jpg" target="_blank"></a>

華麗的分割線

如果大家想了解我對整個問題的探究過程，那就繼續往下看，蠻有意思的（其實也因為探究問題最初的跑偏，讓我學習到了相關的更多知識，過程比較惡心，但是結果比較開心。）

查到這裡我就已經有點不耐煩了，因為貌似需要去檢視ajaxfileupload.js插件的源代碼了，說實話，看js源碼是我衆多不愛做的事情之一。但是我又是不喜歡遇到問題草草了事的人，是以必須要看一下了。

最初其實我比較納悶的是js如何實作将檔案上傳的？當然，我知道是ajax，但是導向頁面的時候，背景是怎麼得到的想要上傳檔案路徑的呢？（前台是死都不會讓你得到的，隻會是類似c:\fakepath\XXX.jpg）原諒我的無知，其實一直在用ASP.NET的自帶控件，從來也就沒有把這些問題當回事（隻是最近好像才靈光一些，聽一些朋友說現在開發都不會用ASP.NET的自帶控件了，是以最近才開始改變），但是當需要用&lt;input type=file /&gt;的時候，才知道自己真的是一無所知。好杯具啊~

說一下js是怎樣通過ajax實作上傳檔案的吧，簡單說就是通過送出表單，把包含有&lt;input type=file /&gt;的form送出就OK了，然後在背景通過

<code>HttpFileCollection files = System.Web.HttpContext.Current.Request.Files</code>

就能得到這個檔案對象，然後就可以進行一系列的操作了。不過通常都是先把檔案儲存到一個我們指定的目錄下，如果你想預覽圖檔，那麼就隻能調出拷貝到指定目錄下的圖檔去顯示。不知道我說的清楚否？

下面說說 ajaxfileupload.js插件是怎麼實作檔案上傳的吧，它是動态的去建立一個iframe和一個form，然後clone（克隆）頁面中的&lt;input type=file /&gt;到這個form中，之後送出這個動态建立的form，這樣背景就能知道你想上傳的檔案是什麼了，傳回的内容顯示到動态iframe中，更重要的是這是一個無重新整理的上傳啊！感覺這個想法簡直酷斃了。

回到問題，在這個過程中我發現完全沒有所謂的“跨域調函數”的問題，後來跟着浏覽器打斷點。發現選擇較大檔案上傳的時候，動态iframe的文檔結構根本就沒有生成出來，接着就被catch住了。

因為整個js的代碼看的還算仔細，感覺也沒什麼尿點。就是因為上傳檔案的大小不同會導緻iframe的文檔結構能否生成，是以這時候我才有點反過勁兒來，是不是項目配置的問題啊？然後就找到了上面的解決辦法。

兜了一個大圈子終于把問題解決，但是關于ajaxfileupload.js插件的事兒還沒有完，如有興趣，請關注：

<a href="http://zhouhongyu1989.blog.51cto.com/2931598/1550045" target="_blank">jQuery 關于ajaxfileupload.js插件的逐漸解析（ajaxfileupload.js第二彈）</a>

<a href="http://zhouhongyu1989.blog.51cto.com/2931598/1550401" target="_blank">jQuery 自制上傳頭像插件-附帶Demo執行個體（ajaxfileupload.js第三彈）</a>

本文轉自 我不會抽煙 51CTO部落格，原文連結：http://blog.51cto.com/zhouhongyu1989/1549192，如需轉載請自行聯系原作者