FormData 유형은 실제로 XMLHttpRequest 레벨 2에서 정의되며, 이는 테이블을 직렬화하고 양식과 동일한 형식(물론 XHR 전송의 경우)으로 데이터를 생성하는 데 편리함을 제공합니다. 다음으로 이번 글을 통해 업로드 진행 모니터링을 구현하는 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이 아닌 경우에는 다음과 같습니다).
jQuery의 Ajax 메소드를 사용하여 FormData 데이터 보내기
//记录当前时间 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) { //失败回调 } });
위 내용은 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
ajaxfileupload.js는 파일 업로드를 구현합니다(단계 포함).
ajaxfileupload.js의 헤더 메서드와 콘텐츠 인스턴스를 가져옵니다. 단계 코드)
위 내용은 FormData+Ajax는 업로드 진행 모니터링을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!