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

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

jquery랑 에이잭스로 이미지 올리려고 하는데그런데 여기서 이상한 일이 일어났어요.콘솔에서 로그 표시

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에서 폼 데이터를 사용하려면 올바른 옵션을 설정해야 합니다.

$.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     
    }
});

.timeout 레퍼런스

processData(기본값: true)

유형: 부울

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

AJAX에 다음 2개의 파라미터를 추가하여 문제를 해결합니다.

processData: false,
contentType: false,

추가:

processData: false,
contentType: false,

파일 처리에 확실히 도움이 됩니다.그 외에도, 페이지에 에러나 성공 메세지를 전달하고 있는 경우는, json을 사용해 생활을 용이하게 하고 싶다고 생각합니다.

예:

dataType: 'json',

이것은, 응답의 해석에 도움이 됩니다.그렇지 않으면 오류가 발생합니다.

Ajax 콜에서는 다음 파라미터를 설정해야 합니다.

enctype: 'multipart/form-data'

행을 편집하기만 하면 됩니다.

var postData = new FormData(this);

대상:

var postData = new FormData($(this));

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