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

在寫這篇的時候本來想把標題直接寫成報錯的提示,如下:

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

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

“ASP.NET 上傳過大圖片或文件報錯解決辦法”

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

那言歸正傳了。

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

先提示

wKioL1QJSImzRuCeAACB2ER0i9w500.jpg

後提示

wKioL1QJSJ2AyksWAABkAWf5Afw735.jpg

是這樣的,在網上下載了一個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" />

說明:

wKioL1QJSNjyjzUYAAegINuoGVw046.jpg

華麗的分割線


華麗的分割線

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

話說查那個報錯提示,就是“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第四彈)




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章