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

在寫這篇的時候原本想把標題直接寫成報錯的提示，以下：

「SecurityError：Blocked a frame with origin "http://localhost:55080" from accessing a cross-origin frame.」

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

「ASP.NET 上傳過大圖片或文件報錯解決辦法」，

而後當我寫完這個題目以後，我以爲這篇文章好像根本沒有寫的必要，估計看完題目就會想到關於web.config配置的方面了。可是想寫的內容真的不是那麼「單純」的，畢竟是花了本身幾個小時去研究的啊~~因此又想了一下，變成了如今的這個題目，就是想和你們分享一下。

那言歸正傳了。

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

先提示

後提示

是這樣的，在網上下載了一個ajaxfileupload.js插件，用於無刷新上傳圖片使的，而後就按照demo的例子去運行了一下，上傳啊什麼的都OK，可是正好上傳的示例圖片有一個比較大的，4M，5M的樣子，而後上傳就會報上面的錯誤。

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

雖然問題提示當中沒有明顯的說出是跟上傳圖片的大小有關係，可是這個問題確實是由於沒有設置上傳文件的大小，而asp.net的默認上傳文件大小是2M

我先把解決方法告訴你們，就是在Web.config的<system.web>中加上下面這段

<httpRuntime maxRequestLength="4096"
    useFullyQualifiedRedirectUrl="true"
    executionTimeout="6000"
    minFreeThreads="8"
    minLocalRequestFreeThreads="4"
    appRequestQueueLimit="100"
    enableVersionHeader="true" />

說明：

華麗的分割線

---

華麗的分割線

若是你們想了解我對整個問題的探究過程，那就繼續往下看，蠻有意思的（其實也由於探究問題最初的跑偏，讓我學習到了相關的更多知識，過程比較噁心，可是結果比較開心。）

話說查那個報錯提示，就是「SecurityError：Blocked a frame with origin "http://localhost:55080" from accessing a cross-origin frame.」這句，而後提到了什麼「跨域調函數」，當時就迷糊了，這是什麼東西啊？而後看到一篇文章是講關於這個的，主要說就是頁面中存在一個iframe，而後iframe中的js代碼與頁面中的js代碼相互調用，在某種狀況下就變成了跨域的調用，就會報錯。

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

最初其實我比較納悶的是js如何實現將文件上傳的？固然，我知道是ajax，可是導向頁面的時候，後臺是怎麼獲得的想要上傳文件路徑的呢？（前臺是死都不會讓你獲得的，只會是相似c:\fakepath\XXX.jpg）原諒個人無知，其實一直在用ASP.NET的自帶控件，歷來也就沒有把這些問題當回事（只是最近好像才靈光一些，聽一些朋友說如今開發都不會用ASP.NET的自帶控件了，因此最近纔開始改變），可是當須要用<input type=file />的時候，才知道本身真的是一無所知。好杯具啊~

說一下js是怎樣經過ajax實現上傳文件的吧，簡單說就是經過提交表單，把包含有<input type=file />的form提交就OK了，而後在後臺經過

HttpFileCollection files = System.Web.HttpContext.Current.Request.Files

就能獲得這個文件對象，而後就能夠進行一系列的操做了。不過一般都是先把文件保存到一個咱們指定的目錄下，若是你想預覽圖片，那麼就只能調出拷貝到指定目錄下的圖片去顯示。不知道我說的清楚否？

下面說說 ajaxfileupload.js插件是怎麼實現文件上傳的吧，它是動態的去建立一個iframe和一個form，而後clone（克隆）頁面中的<input type=file />到這個form中，以後提交這個動態建立的form，這樣後臺就能知道你想上傳的文件是什麼了，返回的內容顯示到動態iframe中，更重要的是這是一個無刷新的上傳啊！感受這個想法簡直酷斃了。

回到問題，在這個過程當中我發現徹底沒有所謂的「跨域調函數」的問題，後來跟着瀏覽器打斷點。發現選擇較大文件上傳的時候，動態iframe的文檔結構根本就沒有生成出來，接着就被catch住了。

由於整個js的代碼看的還算仔細，感受也沒什麼尿點。就是由於上傳文件的大小不一樣會致使iframe的文檔結構可否生成，因此這時候我纔有點反過勁兒來，是否是項目配置的問題啊？而後就找到了上面的解決辦法。

 

兜了一個大圈子終於把問題解決，可是關於ajaxfileupload.js插件的事兒尚未完，若有興趣，請關注：

jQuery 關於ajaxfileupload.js插件的逐步解析（ajaxfileupload.js第二彈）

jQuery 自制上傳頭像插件-附帶Demo實例（ajaxfileupload.js第三彈）

 

補充：

《jQuery 關於IE9上傳文件沒法進入後臺問題的緣由及解決辦法（ajaxfileupload.js第四彈）》