Melaksanakan fungsi muat naik fail tak segerak merentas domain berdasarkan Jquery plug-in_jquery

Biar saya terangkan dahulu

Untuk fungsi muat naik tak segerak merentas domain ini, kami menggunakan pemalam Jquery.form, yang sangat berkesan dalam borang tak segerak, kami akan menambahkan kaedah kawalan-akses-benarkan pada pengepala respons HTTP . Sudah tentu, teg pengepala ini hanya IE10, Firefox dan Google menyokongnya Untuk penyemak imbas di bawah IE10, kami tidak boleh menggunakan kaedah ini domain yang sama seperti halaman muat naik fail) untuk mengembalikan data yang berkaitan.

Lakukan lebih banyak perkara

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

Perhatikan bahawa kaedah eventStart dalam kod merujuk kepada menyerahkan borang secara automatik selepas memilih fail, manakala ajaxForm menunjukkan bahawa penyerahan borang adalah pengecualian, dan kaedah panggil balik kejayaan merujuk kepada nilai pulangan alamat borang secara tidak segerak.

2 Pelaksanaan awal merentas domain

Untuk menyelesaikan akses domain, kami boleh menambahkan Access-Control-Allow-Origin dan Access-Control-Allow-Methods pada pengepala respons pelayan ini tidak disokong oleh pelayar di bawah IE10, yang sangat sukar menyedihkan.

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

Perhatikan bahawa dalam persekitaran pengeluaran, Access-Control-Allow-Origin kami harus menyatakan nama domain yang sah * bermakna semua tapak web terbuka untuk diakses, yang berbahaya.

3 Selesaikan masalah yang IE10 dan ke bawah tidak boleh merentas domain

Saya benar-benar tidak boleh mengatakan apa-apa tentang pelayar IE Walaupun saya sangat menyukai barangan Microsoft, saya hanya boleh mengatakan TIDAK kepada IE pelaksanaan muat naik merentas domain terlebih dahulu Idea penyelesaian: pelanggan tidak memulangkan data secara langsung, tetapi menulis semula alamat panggilan balik kepada pelanggan, dan panggilan balik mengembalikan data akhir seperti kaedah ajaxForm, sekali gus menyelesaikan masalah silang domain langsung.

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

Kadangkala, apabila kita berfikir tentang penyelesaian kepada masalah, jika kita tidak boleh melalui satu jalan, kita boleh mengubah pemikiran kita, dan kita mungkin mendapat keuntungan yang tidak dijangka!

Seseorang bertanya sama ada boleh menggunakan POST untuk memindahkan data antara pelayan dan pelanggan itu berkata: Tidak, kerana selepas POST diserahkan kepada pelanggan, pelanggan memprosesnya dan kemudian mengembalikan hasilnya kepada perkhidmatan. . berakhir, dan akhirnya pelayan mengembalikan hasilnya kepada ajaxform Ini kembali kepada masalah merentas domain pada mulanya, haha!

Haha, bagaimana pula, ia agak menarik!

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang. Terima kasih kerana membaca!