jQuery.form 플러그인 및 도메인 간 비동기 파일 upload_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으로 반환합니다. 이것은 처음의 도메인 간 문제로 돌아갑니다. 하하!

위는 jQuery.form 플러그인을 기반으로 jQuery 크로스 도메인 비동기 파일 업로드를 구현하기 위해 에디터에서 소개한 관련 내용입니다.