집 >웹 프론트엔드 >JS 튜토리얼 >jQuery+formdata는 업로드 진행 효과를 생성합니다(단계 코드 포함).

jQuery+formdata는 업로드 진행 효과를 생성합니다(단계 코드 포함).

php中世界最好的语言원래의: 2018-04-26 11:20:351886검색

이번에는 업로드 진행 효과를 생성하기 위한 jQuery+폼데이터를 가져왔습니다. (단계 코드 포함) jQuery+폼데이터에서 업로드 진행 효과를 생성하는 데 사용할 주의 사항은 무엇입니까?

문제 목록

1. JQUERY.AJAX는 업로드 진행 상황의 ONPROGRESS 이벤트를 모니터링하지 않습니다.

2. XMLHTTPREQUEST(XHR) 도메인 간

질문 및 답변

1. JQUERY는 ONPROGRESS 이벤트에 대한 인터페이스를 제공하지 않으며 기본 XHR 개체는 다른 인터페이스에서 찾아야 합니다.

jQuery.ajax()는 jqXHR 객체를 반환합니다. jqXHR은 XHR(네이티브)을 모방하지만, jqXHR이 고유한 메소드(예: .promise())를 추가하더라도 XHR(예: .upload)을 구현하는 모든 메소드 및 속성을 모방하지는 않습니다. 따라서 jqXHR은 XHR의 상위 집합이 아닙니다.

//下面是截取jQ内部的源码，$.ajax();返回的就是这个jqXHR（伪造XMLHttpRequest）
// Fake xhr
 jqXHR = {
  readyState: 0,

XHR의 업로드 속성은 XMLHttpRequestUpload(IE10은 XMLHttpRequestEventTarget)를 가리키며, 이 개체의 onprogress 이벤트는 업로드 진행 상황을 모니터링할 수 있습니다. jQ에서는 이 기능에 대한 API를 제공하지 않기 때문에 jQ의 일부 데이터 업로드 방법은 XHR을 사용하므로 다른 API에서 XHR을 찾을 수 있습니다. XHR이 데이터를 보내기 전에 onprogress 이벤트를 바인딩하면 업로드 진행 기능을 구현할 수 있습니다.

OPTIONS 매개변수 구성에서 XHR과 관련된 두 가지 속성을 찾았습니다.

-XHR: 콜백이 XMLHTTPREQUEST 개체를 생성합니다.

xhr()의 반환 값은 jQ가 사용할 수 있도록 제공되는 XHR입니다. 즉, 이 XHR은 데이터를 보내는 데 사용됩니다. xhr을 통해 콜백 함수를 생성하여 이를 재정의하고 XHR도 반환할 수 있지만 여기에 onprogress 이벤트를 바인딩할 수 있습니다.

//jQ源码
// Get a new xhr
var handle, i,
 xhr = s.xhr();//[回调]在这里，下面是open方法
// Open the socket
// Passing null username, generates a login popup on Opera (#2865)
if ( s.username ) {
 xhr.open( s.type, s.url, s.async, s.username, s.password );
} else {
 xhr.open( s.type, s.url, s.async );
}

그러므로 다음을 수행해야 합니다.

$.ajax({
 //.....
 xhr: function() {
  var xhr = $.ajaxSettings.xhr();
  //绑定上传进度的回调函数
  xhr.upload.addEventListener('progress', progress, false);
  return xhr;//一定要返回，不然jQ没有XHR对象用了
 }
});

- XHRFIELDS: "파일 이름-파일 값" 쌍으로 구성된 매핑으로 기본 XHR 개체를 설정하는 데 사용됩니다.

xhrFields 속성은 jQ가 내부적으로 생성한 XHR을 가리키며, xhrFields를 기반으로 XMLHttpRequest를 얻을 수 있습니다. xhrFields의 값은 json 객체만 될 수 있으므로 다음과 같은 방법으로는 얻을 수 없습니다.

//错误例子
$.ajax({
 //......
 xhrFields: {
  upload.onprogress: function() {
   //语法错误
  }
 }
});

다음과 같이 XHR의 onsendstart 이벤트를 사용할 수 있습니다.

$.ajax({
 //......
 xhrFields: {
  onsendstart: function() {
   //this是指向XHR
   this.upload.addEventListener('progress', progress, false);
  }
 }
});

2. XMLHTTPREQUESTⅡ(XHR)는 크로스 도메인을 지원하지만 백그라운드 권한이 필요합니다.

//后台需发送头部验证
if($_REQUEST['cros']) {
 header("Access-Control-Allow-Origin:请求的域名");
}

백그라운드에서 제공하는 인터페이스에 따라 cros 매개변수를 추가해야 합니다. 하지만 파일과 함께 이 매개변수를 제출했을 때 도메인 간 제한을 묻는 메시지가 표시되었습니다. 마지막으로 이 매개변수를 URL에 넣으세요.

XHR에는 두 개의 도메인 간 요청이 있는 것으로 나타났습니다. 첫 번째는 확인 요청입니다. 브라우저는 요청 대상 주소를 기반으로 자동으로 옵션 요청을 발행합니다. 통과하면 맞춤형 게시물 요청이 발행될 수 있습니다. 따라서 post 요청에 매개변수를 넣으세요. 첫 번째 요청에는 cros 매개변수가 없습니다. 즉, 통과할 수 없습니다.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!