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은 양식 제출이 예외임을 나타내며 성공 콜백 메소드는 양식 주소의 반환 값을 비동기적으로 참조합니다.

2 크로스 도메인 초기 구현

도메인 액세스를 해결하기 위해 서버의 응답 헤더에 Access-Control-Allow-Origin 및 Access-Control-Allow-Method를 추가할 수 있습니다. 이러한 기능은 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이 합법적인 도메인 이름을 지정해야 한다는 점에 유의하세요. *는 모든 웹사이트가 액세스 가능하다는 의미이므로 위험합니다.

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

가끔 문제에 대한 해결책을 고민할 때, 한 가지 길로만 갈 수 없다면 생각을 바꾸면 예상치 못한 이득을 얻을 수도 있습니다!

누군가 POST를 사용하여 서버와 클라이언트 간에 데이터를 전송하는 것이 가능한지 물었습니다. 삼촌은 다음과 같이 말했습니다. POST가 클라이언트에 제출된 후 클라이언트가 이를 처리한 다음 결과를 서비스에 반환하기 때문입니다. .end, 그리고 마지막으로 서버는 결과를 ajaxform으로 반환합니다. 이것은 처음의 도메인 간 문제로 돌아갑니다. 하하!

하하, 어때요, 꽤 흥미롭네요!

이상은 이 글의 전체 내용입니다. 읽어주셔서 감사합니다.