Implémentation d'une fonction de téléchargement de fichiers asynchrone inter-domaines basée sur le plug-in_jquery Jquery

Laissez-moi d'abord vous expliquer

Pour cette fonction de téléchargement asynchrone inter-domaines, nous utilisons le plug-in Jquery.form, qui est très efficace dans les formulaires asynchrones, nous ajouterons la méthode access-control-allow-method à l'en-tête de réponse HTTP. Bien sûr, cette balise d'en-tête est uniquement prise en charge par IE10, Firefox et Google. Pour les navigateurs inférieurs à IE10, nous ne pouvons pas utiliser cette méthode. Nous devons changer notre façon de penser pour ce faire, laisser le serveur réécrire notre client et le client (sous le). même domaine que la page de téléchargement de fichiers) pour renvoyer les données pertinentes.

Faire plus de choses

1 Utilisation de 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();
  }

Notez que la méthode eventStart dans le code fait référence à la soumission automatique du formulaire après la sélection du fichier, tandis que ajaxForm indique que la soumission du formulaire est une exception et que la méthode de rappel de réussite fait référence à la valeur de retour de l'adresse du formulaire de manière asynchrone.

2 Mise en œuvre initiale du cross-domain

Pour résoudre l'accès au domaine, nous pouvons ajouter Access-Control-Allow-Origin et Access-Control-Allow-Methods à l'en-tête de réponse du serveur. Ces fonctionnalités ne sont pas prises en charge par les navigateurs inférieurs à IE10, ce qui est très difficile. déprimant.

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

Notez que dans un environnement de production, notre Access-Control-Allow-Origin doit spécifier un nom de domaine légal * signifie que tous les sites Web sont ouverts en accès, ce qui est dangereux.

3 Résolvez le problème selon lequel IE10 et versions antérieures ne peuvent pas traverser le domaine

Je ne peux vraiment rien dire sur le navigateur IE. Bien que j'aime beaucoup les produits de Microsoft, je ne peux que dire NON à IE, je ne veux vraiment pas trop en parler. implémentation du téléchargement inter-domaines en premier.L'idée de la solution : le client ne renvoie pas directement les données, mais réécrit l'adresse de rappel au client, et le rappel renvoie les données finales comme la méthode ajaxForm, résolvant ainsi le problème inter-domaines direct.

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

Parfois, lorsque nous réfléchissons à une solution à un problème, si nous ne pouvons pas emprunter un chemin, nous pouvons changer notre façon de penser et nous pouvons obtenir des gains inattendus !

Quelqu'un a demandé s'il était possible d'utiliser le POST pour transférer des données entre le serveur et le client. L'oncle a répondu : Non, car une fois le POST soumis au client, le client le traite puis renvoie le résultat au service. .fin, et enfin le serveur renvoie le résultat à ajaxform. Cela revient au problème inter-domaines du début, haha ​​!

Haha, que dis-tu, c'est assez intéressant !

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. Merci d’avoir lu !