FormData 객체는 Ajax 요청을 하고 파일을 업로드합니다.

이 글에서는 FormData 객체를 사용하여 Ajax 요청을 하고 파일을 업로드하는 방법을 공유합니다.

XMLHttpRequest Level2는 새로운 인터페이스인 FormData를 추가합니다. 【 주로 양식 데이터를 전송하는 데 사용되지만 키가 지정된 데이터를 전송하는 데 독립적으로 사용할 수도 있습니다. 일반 Ajax에 비해 바이너리 파일을 비동기식으로 업로드할 수 있습니다】

FormData 객체를 사용하면 일부 키-값 쌍을 사용하여 js를 통해 일련의 양식 컨트롤을 시뮬레이션할 수 있으며 send() 메서드도 사용할 수 있습니다. XMLHttpRequest를 사용하여 양식을 비동기적으로 제출합니다.

우선, 이전 "프런트엔드 및 백엔드 상호작용을 위한 매개변수 전달 방법"에서 설명한 전통적인 양식 제출 방법(양식 직렬화)은 업로드된 파일 스트림에만 적합합니다. 파일을 직렬화하여 전달할 수 없습니다. 따라서 FormData를 사용하면 쉽게 ajax와 결합하여 파일을 업로드할 수 있습니다.

1. Ajax 요청 및 파일 업로드를 위한 FormData 사용을 소개하기 전에 먼저 FormData와 그 사용에 대해 알아봅시다:::::

W3C 초안은 양식 데이터를 얻거나 수정하는 세 가지 옵션을 제공합니다. : ::

WAY1: 빈 Form Data 객체를 생성한 다음 추가()를 사용하여 키-값 쌍을 하나씩 추가합니다

var oMyForm = new FormData();    // 创建一个空的FormData对象
oMyForm.append("userName","Coco");       // append()方法添加字段
oMyForm.append("accountNum",123456);   // 数字123456立即被转换成字符串“123456”
oMyForm.append("userFile",fileInputElement.files[0]);var oFileBody = "<a id="a"><b id="b">hey!</b></a>";
var oBlob = new Blob([oFileBody],{type:"text/html"});  // Blob对象包含的文件内容是oFileBody
oMyForm.append("webmasterfile",oBlob);
var oReq = new XMLHttpRequest();
oReq.open("POST","   .php");
oPeq.send(oMyForm);   // 使用XMLHttpRequest的send()把数据发送出去

"userFile" 및 " 위의 "webmasterfile"에는 모두 파일이 포함되어 있습니다.

필드 값은 Blob 개체, 파일 개체 또는 문자열일 수 있습니다. 위의 "accountNum"과 같은 다른 유형은 자동으로 문자열로 변환됩니다.

WAY2: 양식 요소 개체를 매개변수로 가져와 FormData 개체에 전달합니다.

—— 의사 코드——

var new_FormData = new FormData( someFormElement );

예:

var FormElement = document.getElementById("myFormElement");var oReq = new XMLHttpRequest();
oReq.open("POST","     .php");
oReq.send(new FormData(FormData));

다음을 기반으로 계속할 수도 있습니다. 기존 양식에 새 키-값 쌍 추가:

var FormElement = document.getElementById("myFormElement");var formData = new FormData(FormElement);
formData.append("serialnumber",serialNumber++);var oReq = new XMLHttpRequest();
oReq.send(formData);

전송하기 전에 사용자가 이런 방식으로 편집하지 못하게 하려는 일부 고정 필드를 추가할 수 있습니다.

WAY3: 양식 개체의 getFormData 메서드를 사용하여

var formobj = document.getElementById("myFormElement");
var formdata = formobj.getFormData();

Ajax를 통해 이미지를 비동기적으로 업로드하려면 기본 js와 결합된 FormData 개체를 사용하세요. 물론 기존 jquery 일괄 업로드 플러그인의 원칙은 FormData를 사용하는 것입니다.

2 FormData 개체를 사용하여 바이너리 파일 보내기::::::

way1: 양식 form

1을 통해 FormData를 초기화합니다. 파일 입력 상자

<form enctype="multipare/form-data" method="post" name="fileinfo">

      <label>your email address:</label>
      <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64"/><br>

      <label>custom file label:</label>
      <input type="text" name="filelabel"  size="12" maxlength="32"/><br>

      <label>File to stash:</label>
      <input type="file" name="file" required></form><p id="Output"></p><a href="javascript:sendForm()">stash the file !</a>

2. 사용자가 선택한 파일을 비동기식으로 업로드

function sendForm(){      var oOutput = document.getElementById("Output");      
var oData = new FormData(document.forms.nameItem("fileInfo"));
      oData.append("customField","This is some extra data");      
      var oReq = new XMLHttpRequest();
      oReq.open("POST","     .php",true);
      oReq.onload = function(oEvent){            
      if(oReq.status == 200){
                   oOutput.innerHTML = "Uploaded!";
            }else{
                   oOutput.innerHTML = "Error" + oReq.status + "occurred uploading your file!"
            }
      };
      oReq.send(oData);
}

WAY2: 양식 form

var data = new FormData();var oFileBody = "<a id="a"><b id="b">hey!</b></a>";var oBlob = new Blob([oFileBody],{type:"text/html"});

data.append("myfile",oBlob);

을 사용하지 않고 FormData 개체에 File 개체 또는 Blob 개체를 직접 추가합니다. FormData 객체의 특정 필드 값이 Blob 객체인 경우 HTTP 요청을 보낼 때 Blob 객체에 포함된 파일의 파일 이름을 나타내는 "content-Disposition"은 브라우저마다 다릅니다.

Firefox는 고정을 사용합니다. 문자열은 "blob"이지만 Chrome은 임의의 문자열을 사용합니다. JWay3: jQuery를 사용하여 FormData 보내기(관련 항목을 올바르게 설정하기 위해)

var fd =new FormData(document.getElementById("fileinfo"));
fd.append("customField","This is some extra data");
$.ajax({
     url:"    .php",
     type:"POST",
     data:fd,
     processData:false,   //  告诉jquery不要处理发送的数据
     contentType:false    // 告诉jquery不要设置content-Type请求头});

E III, 예제

1. fromdata를 사용하여 AJAX 요청, 파일 업로드 Rreeereeeee

2, 사용, 사용, 사용, 사용, 사용, 사용, 사용, 사용, 사용 FormData는 양식을 제출하고 이미지를 업로드합니다

<form id="uploadForm">
      指定文件名:<input type="text" name="filename" value="">
      上传文件:<input type="file" name="file">
      
       <input type="button" value="上传" onclick="doUpload()"></form>

function doUpload(){    var formData = new FormData($("#uploadForm")[0]);
    $.ajax({
          url:"   .php",
          type:"POST",
          data:formData,
          async:false,
          cache:false,
          contentType:false,
          processData:false,
          success:function(returndata){
                 alert(returndata);
          },
          error:function(returndata){
                 alert("error:"+returndata);
          }
    });
}

4. 브라우저 호환성

Firefox(Gecko)

IEOperaSafari7+4.0(2.0 )+10+12+5+FormData 사용 Ajax

			jQuery는 FormData를 사용하여 파일을 업로드합니다.

를 통해 파일을 업로드하려면

위 내용은 FormData 객체는 Ajax 요청을 하고 파일을 업로드합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!