Jqueryプラグイン_jqueryをベースとしたクロスドメイン非同期ファイルアップロード機能の実装

まず説明しましょう

このクロスドメインの非同期アップロード機能では、非同期フォームで非常に効果的な Jquery.form プラグインを使用し、HTTP 応答ヘッダーに access-control-allow-method を追加します。もちろん、このヘッダー タグは IE10、Firefox、Google のみでサポートされています。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 に正当なドメイン名を指定する必要があることに注意してください。 * はすべての Web サイトがアクセス可能であることを意味し、これは危険です。

3 IE10以下でドメインを越えられない問題を解決

私は IE ブラウザについては何も言えません。私は Microsoft の製品がとても好きですが、IE についてはあまり話したくないのです。ソリューションのアイデア: クライアントはデータを直接返すのではなく、コールバック アドレスをクライアントに書き換え、コールバックは ajaxForm メソッドのように最終データを返すことで、直接クロスドメインの問題を解決します。

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

問題の解決策を考えるときに、1 つの道を通れない場合は、考え方を変えることができ、予期せぬ利益が得られることがあります。

誰かが、POST を使用してサーバーとクライアントの間でデータを転送できるかどうか尋ねました。おじさんは、「いいえ、POST がクライアントに送信された後、クライアントはそれを処理して結果をサービスに返すからです」と言いました。 . 最後に、サーバーは結果を ajaxform に返します。これは最初のクロスドメインの問題に戻ります。

ははは、どうですか、なかなか面白いですね！

以上がこの記事の全内容です。読んでいただきありがとうございます。