js 에서 new FormData 사용

개술

FormData      ：
1.                ：  form        name value   
  queryString
2.          。

사용 하 다
1. FormData 대상 의 조작 방법 은 모두 원형 에 있 고 자신 자체 에 어떠한 속성 과 방법 도 없다.

let formData = new FormData()
formData.append('user', 'zhang')
   formData.get('user')  //zhang
   formData.append('user')
.....

2. FormData 대상 으로 파일 보 내기

HTML  
<form action="">
        <label for="">
              : <input type="text" name="name">
        label>
        <label for="">
              ：<input id="file" type="file" name="file">
        label>
        <label for="">
            <input type="button" value="  ">
        label>
form>
JS  
var btn = document.querySelector('[type=button]');
btn.onclick = function () {
    //     
    var file = document.querySelector('[type=file]');
    //   FormData          
    var formData = new FormData();
    //        
    *****  2******
    formData.append('upload', file.files[0]);
    *****  1******
    var xhr = new XMLHttpRequest;
    xhr.open('post', 'file.php');
    //       
    xhr.upload.onprogress = function (ev) {
    //     
    // console.log(ev);

        var percent = (ev.loaded / ev.total) * 100 + '%';

        console.log(percent);

        progress.style.width = percent;
    }

    xhr.send(formData);

    xhr.onreadystatechange = function () {
            if(xhr.readyState == 4 && xhr.status == 200) {
                    //
            }
    }
}

주의 1: jQuery 사용

 $.ajax({
    url: 'file.php',
    type: 'POST',
    data: formdata,                    //   formdata     
    dataType: 'JSON',
    cache: false,                      //    
    processData: false,                // jQuery          
    contentType: false,                // jQuery     Content-Type   
    success:function (data) {           //    
        console.log(data);
    }
});

주의 2: 인자 new FormData 의 매개 변 수 는 jQuery 대상 이 아 닌 DOM 대상 입 니 다.

var formData = new FormData($("#file")[0]);

3. jQuery 의 매개 변수 직렬 화 방법 serialize ()
시퀀스 표 의 내용 은 문자열 로 Ajax 요청 에 사 용 됩 니 다.  $("form").serialize()