Jquery implements cross-origin asynchronous file upload summary and jquery uploads files

Jquery implements cross-origin asynchronous file upload summary and jquery uploads files

First understand

This cross-origin asynchronous upload function uses Jquery. form plug-in, which is very effective in asynchronous forms, while cross-origin we will add access-control-allow-method in the HTTP Response Header, of course, this header is only IE10, firefox and Google support. For browsers earlier than IE10, we cannot use this method. We need to change our minds to do this, so that the server can rewrite it to our client, the client (in the same domain as the file upload page) can return relevant data.

1. Use of 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, f Ilepath. length). toUpperCase (); if (ext! = ". PNG" & ext! = ". JPG ") {alert (" images only support png, jpg format "); $ (" # qdctvfile11 "). val (""); return false ;}, success: function (data) {alert (data) ;}}); function eventStart (obj) {$ ("# form1 "). submit ();}

Note: In the code, the eventStart method is used to automatically submit the form after selecting a file, while ajaxForm indicates that the form is submitted in an exception mode, and the success callback method is used to return the return value of the form address asynchronously.

2. Preliminary Implementation of cross-Origin

To resolve domain Access, we can add the Access-Control-Allow-Origin and Access-Control-Allow-Methods features to the server's response header, these features are not supported in IE 10 or earlier browsers, and they are very depressing.

/// <Summary> // cross-origin access in MVC mode /// </summary> public class mvccorsattriing: 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 );}}

Note: In the production environment, our Access-Control-Allow-Origin should be a valid domain name. * indicates that Access to all websites is open, which is dangerous.

3 solve the problem that IE10 or lower cannot cross-Origin

I can't say anything about IE. Although I like Microsoft very much, I can only be NO for IE. I really don't want to talk about it too much, first, let's take a look at the solution to implementing cross-origin upload in IE: the client does not directly return data, but overwrites the callback address to the client, and the callback method returns the final data like ajaxForm, this solves the direct cross-origin problem.

 

/// <Summary> /// third-party server // </summary> /// <param name = "name"> </param> /// <returns> </returns> [HttpPost] public ActionResult UploadResult () {string data = "{'code': 'OK', 'thumpimgurl': 'http: // 127.0.0.1/images/1.jpg '}"; return Redirect ("http: // localhost: 9497/Home/UploadCallback? Data = "+ data );} /// <summary> /// it may be called by the server. /// </summary> /// <returns> </returns> public ActionResult UploadCallback (string data) {return Content (data );}

Sometimes, when we are thinking about a solution to a problem, if one path fails, we can change our mindset and we may have unexpected gains!

Someone asked, the POST method can be used to transmit data between the server and the client. Uncle said: No, because after the POST is submitted to the client, the client processes it, then return the result to the server, and then the server returns the result to the ajaxform. This is back to the starting cross-origin issue. Haha!

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.