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
}
});
processData (기본값 : true)
유형 : 부울
기본적으로 데이터 옵션에 개체 (기술적으로 문자열 이외의 모든 항목)로 전달 된 데이터는 처리되고 기본 콘텐츠 유형 “application / x-www-form-urlencoded”에 맞는 쿼리 문자열로 변환됩니다. . DOMDocument 또는 기타 처리되지 않은 데이터를 보내려면이 옵션을 false로 설정하십시오.
답변
AJAX에 다음 두 매개 변수를 추가하여 문제를 해결하십시오.
processData: false,
contentType: false,
답변
ajax 호출에서이 매개 변수를 설정해야합니다.
enctype: 'multipart/form-data'
답변
첨가:
processData: false,
contentType: false,
파일에 확실히 도움이 될 것입니다. 그 외에도 페이지에 오류 또는 성공 메시지를 다시 전달하는 경우 json을 사용하여 삶을 더 쉽게 만들고 싶을 것입니다.
예:
dataType: 'json',
이것은 당신의 응답을 파싱하는데 도움이 될 것입니다. 그것이 없으면 오류가 발생합니다.
답변
라인을 편집하십시오.
var postData = new FormData(this);
에:
var postData = new FormData($(this));