Implementierung einer domänenübergreifenden asynchronen Datei-Upload-Funktion basierend auf dem Jquery-Plug-in_jquery

Lass es mich zuerst erklären

Für diese domänenübergreifende asynchrone Upload-Funktion verwenden wir das Jquery.form-Plug-in, das in asynchronen Formularen sehr effektiv ist. Für domänenübergreifende Zwecke fügen wir dem HTTP-Antwortheader die Zugriffskontroll-Zulassungsmethode hinzu . Dieses Header-Tag wird natürlich nur von IE10, Firefox und Google unterstützt. Für Browser unter IE10 müssen wir unsere Denkweise ändern. Lassen Sie den Server unseren Client neu schreiben (dieselbe Domain wie die Datei-Upload-Seite), um relevante Daten zurückzugeben.

Mehr Dinge tun

1 Verwendung von 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();
  }

Beachten Sie, dass sich die eventStart-Methode im Code auf das automatische Senden des Formulars nach Auswahl der Datei bezieht, während ajaxForm angibt, dass das Senden des Formulars eine Ausnahme ist, und die Erfolgsrückrufmethode sich auf den asynchronen Rückgabewert der Formularadresse bezieht.

2 Erste Implementierung von Cross-Domain

Um den Domänenzugriff zu lösen, können wir Access-Control-Allow-Origin und Access-Control-Allow-Methods zum Antwortheader des Servers hinzufügen. Diese Funktionen werden von Browsern unter IE10 nicht unterstützt deprimierend.

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

Beachten Sie, dass in einer Produktionsumgebung unser Access-Control-Allow-Origin einen legalen Domänennamen angeben sollte. * bedeutet, dass alle Websites für den Zugriff geöffnet sind, was gefährlich ist.

3 Lösen Sie das Problem, dass IE10 und niedrigere Domänen nicht domänenübergreifend sein können

Zum IE-Browser kann ich wirklich nichts sagen, aber zum IE kann ich nur NEIN sagen. Schauen wir uns den IE an Implementierung des domänenübergreifenden Hochladens zuerst: Der Client gibt die Daten nicht direkt zurück, sondern schreibt die Rückrufadresse an den Client um, und der Rückruf gibt die endgültigen Daten wie die AjaxForm-Methode zurück, wodurch das direkte domänenübergreifende Problem gelöst wird.

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

Manchmal, wenn wir über eine Lösung für ein Problem nachdenken und es uns nicht gelingt, einen Weg zu gehen, können wir unsere Denkweise ändern und möglicherweise unerwartete Gewinne erzielen!

Jemand fragte, ob es möglich sei, POST zum Übertragen von Daten zwischen dem Server und dem Client zu verwenden. Der Onkel sagte: Nein, denn nachdem der POST an den Client übermittelt wurde, verarbeitet der Client ihn und gibt das Ergebnis dann an den Dienst zurück . Ende, und schließlich gibt der Server das Ergebnis an Ajaxform zurück. Dies ist wieder das domänenübergreifende Problem am Anfang, haha!

Haha, wie wäre es damit, es ist ziemlich interessant!

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium hilfreich sein.