Implementing cross-domain asynchronous file upload function based on Jquery plug-in_jquery

Let me explain first

For this cross-domain asynchronous upload function, we use the Jquery.form plug-in, which is very effective in asynchronous forms. For cross-domain, we will add access-control-allow-method to the HTTP response header. Of course, this header tag only IE10, Firefox and Google support it. For browsers below IE10, we cannot use this method. We need to change our thinking to do this, let the server rewrite our client, and the client (under the same domain as the file upload page) to return relevant data.

Do more things

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, 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();
  }

Note that the eventStart method in the code refers to automatically submitting the form after selecting the file, while ajaxForm indicates that submitting the form is an exception, and the success callback method refers to the return value of the form address asynchronously.

2 Initial implementation of cross-domain

To solve domain access, we can add Access-Control-Allow-Origin and Access-Control-Allow-Methods to the response header of the server. These features are not supported by browsers below IE10, which is very difficult. It's depressing.

  /// <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);
    }
  }

Note that in a production environment, our Access-Control-Allow-Origin should specify a legal domain name. * means that all websites are open to access, which is dangerous.

3 Solve the problem that IE10 and below cannot cross domain

I really can’t say anything about the IE browser. Although I like Microsoft’s stuff very much, I can only say NO to IE. I really don’t want to talk about it too much. Let’s take a look at IE’s implementation of cross-domain uploading first. The solution idea: the client does not directly return data, but rewrites the callback address to the client, and the callback returns the final data like the ajaxForm method, thus solving the direct cross-domain problem.

    /// <summary>
    /// 第三方的服务端
    /// </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&#63;data=" + data);
    }

    /// <summary>
    /// 可能是服务端来调用它
    /// </summary>
    /// <returns></returns>
    public ActionResult UploadCallback(string data)
    {
      return Content(data);
    }

Sometimes, when we are thinking about a solution to a problem, if we can’t go through one path, we can change our thinking, and we may get unexpected gains!

Someone asked whether it is possible to use POST to transfer data between the server and the client. The uncle said: No, because after the POST is submitted to the client, the client processes it and then returns the result to the service. end, and finally the server returns the result to ajaxform. This is back to the cross-domain problem at the beginning, haha!

Haha, how about it, it’s quite interesting!

The above is the entire content of this article. I hope it will be helpful to everyone’s study. Thank you for reading!