實現跨域文件上傳

先看個原理的時序圖:

分析要點:

1、在上傳頁面內設置form的target到一個隱藏的iframe內。

2、提交form到b.com,並將回調地址作爲參數提交給b.com,處理跨域文件上傳。

3、b.com接收回調地址,返回一個無內容的page,page內實現一段javascript,設置location.href到回調地址,即a.com的某個action。

4、b.com的響應頁面內,除了設置回調地址自動跳轉外,需要將b.com的響應結果作爲參數傳遞給a.com。

5、a.com根據b.com的響應結果做對應的處理,並返回最終的響應結果到iframe內,同時,執行jsonp回調,將最終結果通過javascript回調傳遞給上傳頁面。

6、上傳頁面通過javascript回調拿到iframe內的最終處理結果,並提示用戶。


注意要點:

1、實際上是通過iframe內得到了兩次響應,不是通過引入script標籤方式實現,因此不支持jQuery的jsonp直接處理,需實現自己的js回調。

2、本該是一次請求處理的事情拆分爲多次請求處理,存在事務不一致的可能性。

3、不支持uploadify之類的上傳組件,無法實現上傳進度監控。

4、最終的回調依賴同域回調,所以無法讓b.com直接回調a.com的js,而且無法讓b.com直接通過服務端調用a.com的action處理。


該方案已驗證通過,只是比較遺憾,沒能實現結合uploadify做進度反饋。

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