FormData+Ajax 업로드 진행 상황 모니터링(코드 포함)

이번에는 FormData+Ajax 업로드 진행 모니터링(코드 포함)을 가져왔습니다. FormData+Ajax 업로드 진행 모니터링에 대한 주의사항은 무엇인가요?

FormData란 무엇인가요?

FormData 객체는 XMLHttpRequest를 사용하여 요청을 보내기 위해 키/값 쌍 세트를 조합할 수 있습니다. 양식과 독립적으로 사용할 수 있으므로 양식 데이터를 보다 유연하고 편리하게 보낼 수 있습니다. 양식의 인코딩 유형을 multipart/form-data로 설정하면 FormData를 통해 전송되는 데이터 형식은 submit() 메서드를 통해 양식에서 전송되는 데이터 형식과 동일합니다.

FormData 객체 생성 방법;

다음과 같이 FormData 개체를 직접 만들고 해당 Append() 메서드를 호출하여 필드를 추가할 수 있습니다.

//实例化一个formData对象
var formData = new FormData();
formData.append("username", "Groucho");
formData.append("userid", 123456); // 数字 123456 会被立即转换成字符串 "123456"
// HTML上的 文件类型input[type=file]的文件框，由用户选择
formData.append("userfile", fileInputElement.files[0]);
// JavaScript file-like 对象
var content = '<a id="a"><b id="b">hey!</b></a>'; // 新文件的正文...
var blob = new Blob([content], { type: "text/xml"});
formData.append("webmasterfile", blob);

참고: "userfile" 및 "webmasterfile" 필드에는 모두 "userid" 필드가 포함되어 있습니다. FormData.append() 메소드에 의해 문자열 유형으로 변환되는 숫자 유형입니다(FormData 객체의 필드 유형은 Blob, File 또는 문자열일 수 있습니다. 해당 필드 유형이 Blob 또는 File이 아닌 경우에는 다음과 같습니다).

FormData 데이터를 전송하려면 jQuery의 Ajax 메소드를 사용하세요.

//记录当前时间
var time=new Date().getTime();
//记录当前进度
var percentage =null;
//记录当前上传速度
var velocity=null;
//记录已上传文件字节大小
var loaded=0;
$.ajax({
 url: 'Url',
 type: "POST",
 data: formData,
 contentType: false, // 必须 不设置内容类型
 processData: false, // 必须 不处理数据
 xhr: function xhr() {
  //获取原生的xhr对象
  var xhr = $.ajaxSettings.xhr();
  if (xhr.upload) {
   //添加 progress 事件监听
   xhr.upload.addEventListener('progress', function (e) {
    var nowDate = new Date().getTime();
    //每一秒刷新一次状态
    if (nowDate - time >= 1000) {
     //已上传文件字节数/总字节数
     percentage = parseInt(e.loaded / e.total * 100);
     //当前已传大小(字节数)-一秒前已传文件大小(字节数)
     velocity = (e.loaded - loaded) / 1024;
     if (percentage >= 99) {
      $(".hintText").html('服务端正在解析，请稍后');
     } else {
      //修改上次记录时间及数据大小
      time = nowDate;
      loaded = e.loaded;
     }
    } else {
     return;
    }
   }, false);
  }
  return xhr;
 },
 success: function success(response) {
  //成功回调   
 },
 error: function error(error) {
  //失败回调    
 }
});

이 기사의 사례를 읽으신 후 메소드를 마스터하셨을 것으로 믿습니다. PHP 중국어 웹사이트의 다른 관련 기사를 참고하세요!

추천 읽기:

새로고침 드롭다운 링크가 없는 Ajax+Servlet 구현(코드 포함)

Ajax를 사용하여 사용자 이름이 중복되는지 비동기적으로 확인하는 방법

위 내용은 FormData+Ajax 업로드 진행 상황 모니터링(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!