FormData 인터페이스를 구현하지 않는 개체에서 'append'가 호출되었습니다.

FormData 인터페이스를 구현하지 않는 개체에서 'append'가 호출되었습니다.

---

jquery와 ajax를 사용하여 이미지를 업로드하려고합니다. 하지만 여기서 이상한 일이 일어났습니다. 콘솔에서 표시

TypeError : FormData 인터페이스를 구현하지 않는 개체에서 'append'가 호출되었습니다.

내가 여기서 뭘 잘못했는지 말해줘?

JS 스크립트

var prosrc=$("#pro_pix img").last().attr("src");
$("#logoform").on('change',function(event){
var postData = new FormData(this);
$("#pro_pix img").last().hide();
$("#pro_pix img").first().show();
event.preventDefault();
$.ajax(
    {
        url : "/function/pro_pic_upload.php",
        type: "POST",
        data : postData,
        success:function(data, textStatus, jqXHR)
        {
        $("#pro_pix img").last().show();
        $("#pro_pix img").first().hide();
        $("#pro_pix h6").text(data);
        },
        error: function(jqXHR, textStatus, errorThrown)
        {
            //if fails     
        }
    });
});

내 HTML 마크 업

 <div class="row">
    <!-- left column -->
    <div id="pro_pix" class="col-md-4 col-sm-6 col-xs-12">
      <div class="text-center">
        <img src="template/image/725.GIF" class="avatar img-circle img-thumbnail" style="display:none" alt="avatar">
        <img src="<?php echo $rowuser['profile_logo']; ?>" class="avatar img-circle img-thumbnail" alt="avatar">
        <h6>Upload a different photo...</h6>
        <form role="form" id="logoform" enctype="multipart/form-data">
        <input id="logo" name="logo" type="file" class="text-center center-block well well-sm">
        </form>
      </div>
    </div>

---

jquery와 함께 formdata를 사용하려면 올바른 옵션을 설정해야합니다.

$.ajax({
    url : "/function/pro_pic_upload.php",
    type: "POST",
    data : postData,
    processData: false,
    contentType: false,
    success:function(data, textStatus, jqXHR){
        $("#pro_pix img").last().show();
        $("#pro_pix img").first().hide();
        $("#pro_pix h6").text(data);
    },
    error: function(jqXHR, textStatus, errorThrown){
        //if fails     
    }
});

.ajax 참조

processData (기본값 : true)

유형 : 부울

기본적으로 데이터 옵션에 개체 (기술적으로 문자열 이외의 모든 항목)로 전달 된 데이터는 처리되고 기본 콘텐츠 유형 "application / x-www-form-urlencoded"에 맞는 쿼리 문자열로 변환됩니다. . DOMDocument 또는 기타 처리되지 않은 데이터를 보내려면이 옵션을 false로 설정하십시오.

---

Add these two parameters in your AJAX to solve your problem:

processData: false,
contentType: false,

---

You have to set this parameter in the ajax call:

enctype: 'multipart/form-data'

---

Adding:

processData: false,
contentType: false,

will definitely help with the file, an aside to that is if you are doing any sort of passing errors or success messages back to the page, you will want to use json to make you life easier.

example:

dataTyte: 'json',

this will help with parsing your responses. Without it, it will throw an error.

참고URL : https://stackoverflow.com/questions/25390598/append-called-on-an-object-that-does-not-implement-interface-formdata