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

在寫這篇的時(shí)候本來想把標(biāo)題直接寫成報(bào)錯的提示，如下：

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

但是有點(diǎn)長，會顯示不全，就想還是換一下吧，想了一下

“ASP.NET 上傳過大圖片或文件報(bào)錯解決辦法”，

然后當(dāng)我寫完這個題目之后，我覺得這篇文章好像根本沒有寫的必要，估計(jì)看完題目就會想到關(guān)于web.config配置的方面了。但是想寫的內(nèi)容真的不是那么“單純”的，畢竟是花了自己幾個小時(shí)去研究的啊~~所以又想了一下，變成了現(xiàn)在的這個題目，就是想和大家分享一下。

那言歸正傳了。

先上一下報(bào)錯的提示截圖：

先提示

后提示

是這樣的，在網(wǎng)上下載了一個ajaxfileupload.js插件，用于無刷新上傳圖片使的，然后就按照demo的例子去運(yùn)行了一下，上傳啊什么的都OK，但是正好上傳的示例圖片有一個比較大的，4M，5M的樣子，然后上傳就會報(bào)上面的錯誤。

單純看我的描述，明顯發(fā)現(xiàn)就是圖片較大的原因，可能很快就會想到web.config的配置問題上，但是當(dāng)我是當(dāng)局者的時(shí)候，就沒有那么靈光了，因?yàn)橛刑崾惧e誤，就有去百度一下，結(jié)果查到是什么“跨域調(diào)函數(shù)”的問題，至此，這個問題我探究的方向已經(jīng)走偏。

雖然問題提示當(dāng)中沒有明顯的說出是跟上傳圖片的大小有關(guān)系，但是這個問題確實(shí)是因?yàn)闆]有設(shè)置上傳文件的大小，而asp.net的默認(rèn)上傳文件大小是2M

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

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

說明：

華麗的分割線

華麗的分割線

如果大家想了解我對整個問題的探究過程，那就繼續(xù)往下看，蠻有意思的（其實(shí)也因?yàn)樘骄繂栴}最初的跑偏，讓我學(xué)習(xí)到了相關(guān)的更多知識，過程比較惡心，但是結(jié)果比較開心。）

話說查那個報(bào)錯提示，就是“SecurityError：Blocked a frame with origin "http://localhost:55080" from accessing a cross-origin frame.”這句，然后提到了什么“跨域調(diào)函數(shù)”，當(dāng)時(shí)就迷糊了，這是什么東西??？然后看到一篇文章是講關(guān)于這個的，主要說就是頁面中存在一個iframe，然后iframe中的js代碼與頁面中的js代碼相互調(diào)用，在某種情況下就變成了跨域的調(diào)用，就會報(bào)錯。

查到這里我就已經(jīng)有點(diǎn)不耐煩了，因?yàn)槊菜菩枰ゲ榭碼jaxfileupload.js插件的源代碼了，說實(shí)話，看js源碼是我眾多不愛做的事情之一。但是我又是不喜歡遇到問題草草了事的人，所以必須要看一下了。

最初其實(shí)我比較納悶的是js如何實(shí)現(xiàn)將文件上傳的？當(dāng)然，我知道是ajax，但是導(dǎo)向頁面的時(shí)候，后臺是怎么得到的想要上傳文件路徑的呢？（前臺是死都不會讓你得到的，只會是類似c:\fakepath\XXX.jpg）原諒我的無知，其實(shí)一直在用ASP.NET的自帶控件，從來也就沒有把這些問題當(dāng)回事（只是最近好像才靈光一些，聽一些朋友說現(xiàn)在開發(fā)都不會用ASP.NET的自帶控件了，所以最近才開始改變），但是當(dāng)需要用<input type=file />的時(shí)候，才知道自己真的是一無所知。好杯具啊~

說一下js是怎樣通過ajax實(shí)現(xiàn)上傳文件的吧，簡單說就是通過提交表單，把包含有<input type=file />的form提交就OK了，然后在后臺通過

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

就能得到這個文件對象，然后就可以進(jìn)行一系列的操作了。不過通常都是先把文件保存到一個我們指定的目錄下，如果你想預(yù)覽圖片，那么就只能調(diào)出拷貝到指定目錄下的圖片去顯示。不知道我說的清楚否？

下面說說 ajaxfileupload.js插件是怎么實(shí)現(xiàn)文件上傳的吧，它是動態(tài)的去創(chuàng)建一個iframe和一個form，然后clone（克?。╉撁嬷械?span ><input type=file />到這個form中，之后提交這個動態(tài)創(chuàng)建的form，這樣后臺就能知道你想上傳的文件是什么了，返回的內(nèi)容顯示到動態(tài)iframe中，更重要的是這是一個無刷新的上傳??！感覺這個想法簡直酷斃了。

回到問題，在這個過程中我發(fā)現(xiàn)完全沒有所謂的“跨域調(diào)函數(shù)”的問題，后來跟著瀏覽器打斷點(diǎn)。發(fā)現(xiàn)選擇較大文件上傳的時(shí)候，動態(tài)iframe的文檔結(jié)構(gòu)根本就沒有生成出來，接著就被catch住了。

因?yàn)檎麄€js的代碼看的還算仔細(xì)，感覺也沒什么尿點(diǎn)。就是因?yàn)樯蟼魑募拇笮〔煌瑫?dǎo)致iframe的文檔結(jié)構(gòu)能否生成，所以這時(shí)候我才有點(diǎn)反過勁兒來，是不是項(xiàng)目配置的問題啊？然后就找到了上面的解決辦法。

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

jQuery 關(guān)于ajaxfileupload.js插件的逐步解析（ajaxfileupload.js第二彈）

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

補(bǔ)充：

《jQuery 關(guān)于IE9上傳文件無法進(jìn)入后臺原因及解決辦法（ajaxfileupload.js第四彈）》