先說明白
這個跨域非同步上傳功能我們借助了Jquery.form外掛程式,它在非同步表單方面很有成效,而跨域我們會在HTTP回應頭上添加access-control-allow-method,當然這個頭標記只有IE10,火狐和谷歌上支援,對於IE10以下的瀏覽器來說,我們就不能用這種方式了,我們需要換個思路去幹這事,讓服務端去重寫向我們的用戶端,由用戶端(與檔上傳頁面在同域下)來返回相關資料即可。
1、Jquery.form的使用
<form method= "post" action= "http://127.0.0.1:801/Home/UploadResult" enctype= "multipart/form-data" id= "form1" > <input name= "qdctvfile" id= "qdctvfile11" type= "file" onchange= "eventStart()" > </form> <script type= "text/javascript" > $( "#form1" ).ajaxForm({ beforeSerialize: function () { var filepath = $( "#qdctvfile11" ).val() var extStart = filepath.lastIndexOf( "." ); var ext = filepath.substring(extStart, filepath.length).toUpperCase(); if (ext != ".PNG" && ext != ".JPG" ) { alert( "图片仅支持png,jpg格式" ); $( "#qdctvfile11" ).val( "" ); return false ; } }, success: function (data) { alert(data); } }); function eventStart(obj) { $( "#form1" ).submit(); } |
注意,代碼中的eventStart方法是指在選擇檔後,自動提交表單,而ajaxForm表示提交表單為異常方式,success回檔方法是指非同步返回表單位址的傳回值。
2跨域的初步實現
解決域訪問,我們可以在服務端的回應頭上添加Access-Control-Allow-Origin和Access-Control-Allow-Methods兩個特性即可,這些特性在IE10以下的瀏覽器不被支援,很是鬱悶。
/// <summary> /// MVC模式下跨域访问 /// </summary> public class MvcCorsAttribute : ActionFilterAttribute { public override void OnActionExecuting(ActionExecutingContext filterContext) { Dictionary< string , string > headers = new Dictionary< string , string >(); headers.Add( "Access-Control-Allow-Origin" , "*" ); headers.Add( "Access-Control-Allow-Methods" , "*" ); foreach (var item in headers.Keys) { filterContext.RequestContext.HttpContext.Response.Headers.Add(item, headers[item]); } base .OnActionExecuting(filterContext); } } |
注意,在生產環境下,我們的Access-Control-Allow-Origin應該是指定合法的功能變數名稱的,*表示對所以網站都開放訪問,這是危險的。
3 解決IE10以下不能跨域的問題
對於IE瀏覽器確實沒法說了,雖然很喜歡微軟的東西,但對於IE來說,我只能是NO,我真不想過多的去談論它,先看看IE實現跨域上傳的解決思想:由用戶端不直接返回資料,而是重寫向到用戶端的callback位址,由callback像ajaxForm方法返回最終的資料,這樣就解決了直接的跨域問題了。
/// <summary> /// 第三方的服务端 /// </summary> /// <param name="name"></param> /// <returns></returns> [HttpPost] public ActionResult UploadResult() { } /// <summary> /// 可能是服务端来调用它 /// </summary> /// <returns></returns> public ActionResult UploadCallback( string data) { return Content(data); } |
有些時候,我們在想一個問題的解決方法時,如果一條路走不通過,可以換換思路,也許會有意外的收穫!
有人問,這塊使用POST方式在服務端與用戶端進行資料傳遞可以不可以,大叔說:不可以,因為POST在提交到用戶端後,用戶端處理,然後還是把結果返回給服務端,最後服務端再把結果返回給ajaxform,這還是又回到了開始的跨域問題,哈哈!
文章標籤
全站熱搜
留言列表