반응형
AJAX를 사용하여 양식 파일을 보내는 중 오류 발생
CSV 파일이 포함된 AJAX를 사용하여 양식을 제출하려고 합니다.그래서 아이디어는 Ajax를 사용하여 양식을 보내고 테이블을 생성하여 다른 파일로 처리한 후 처리된 테이블을 페이지로 다시 호출하는 것입니다.
내가 가진 것은 이것입니다.
<form id="uploadXls" action="" method="post" enctype="multipart/form-data">
<input id="uploaderFile" type="file" class="file"><br/>
<button type="button" class="btn btn-orange pull-right" name="btnSubmit" id="btnSubmit"><i class="fa fa-download"></i> SHOW FILE CONTENT</button>
</form>
그리고 자바스크립트는,
$("#btnSubmit").click(function(){
$.ajax({
type: 'POST',
url: '../../content/maindiv_content/drawing/divpages/process_xls_file.php',
data: new FormData(this),
contentType: false,
cache: false,
processData: false,
success: function (response, textStatus, jqXHR) {
$("#showFileContentTable").html(data);
}
});
});
그리고 나는 파이어버그에서 이런 종류의 오류를 얻습니다.
TypeError: Argument 1 of FormData.constructor does not implement interface HTMLFormElement.
http://infserver/WeltesTankage/dist/js/jquery-1.10.2.min.js line 4 > eval
Line 14
내가 여기서 뭘 잘못하고 있는 거지? 제발 도와주세요.
파일을 생성자로 전달하지 말고 다음과 같이 append를 사용합니다.
var formData = new FormData();
formData.append('file', $('input[type=file]')[0].files[0]);
data: formData
이 방법도 사용할 수 있습니다.
var form = $('form').get(0);
이 코드는 jQuery 개체($('form')) 및 HTML 요소를 FormData(get(0)).
아약스 요청 시:data: new FormData(form),
합격!this에게FormData시공자이런 맥락에서 보면,this버튼을 클릭한 것이며, 오류 메시지에서 다음과 같이 식별됩니다.HTMLFormElement.
이 문서에 따르면,FormData건설자는 기대합니다.form원소의따라서 코드를 적절히 변경해야 합니다.
var form = $("#uploadXls");
$ajax({
...
data: new FormData(form),
....
});
아마도 이 페이지가 당신을 도와줄 것입니다.:)
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
</head>
<body>
<form method="post" id="fileinfo" enctype="multipart/form-data">
file <input type="file" name="slug"><br>
<input type="button" id="uploadBTN" value="Stash the file!"></input>
</form>
<script type="text/javascript">
$(document).ready(function()
{
$('#uploadBTN').on('click', function()
{
var form = $('form').get(0);
console.log(form);
var fd = new FormData(form);
fd.append('user_id',4);
fd.append('user_media_category_id',1);
//console.log(fd);
fd.append("user_", "This is some extra data");
$.ajax({
url: 'http://localhost/yii2/voila/project/api/web/v1/user-media/new',
type: 'POST',
data: fd,
success:function(data){
console.log(data);
},
error:function(data){
console.log(data);
},
cache: false,
contentType: false,
processData: false
});
});
});
</script>
</body>
</html>
이 양식을 사용해 보십시오. 문제없이 작동합니다. 안녕하세요. 제가 도와드릴 수 있기를 바랍니다.
//형식 변경
var formulario = new FormData($('#form_img').get(0));
formulario.append('file', $('#customFile')[0].files[0]);
//AND add in Ajax call
data:formulario
언급URL : https://stackoverflow.com/questions/28872872/error-in-sending-form-file-with-form-using-ajax
반응형
'programing' 카테고리의 다른 글
| XMLHttpRequest 모듈이 정의되지 않음/찾을 수 없음 (0) | 2023.07.24 |
|---|---|
| Mysql JSON, 값 찾기 및 바꾸기 (0) | 2023.07.24 |
| 데이터베이스 정렬을 변경한 후 단순 쿼리가 작동하지 않음 (0) | 2023.07.24 |
| 두 개의 열을 사용하는 mysql "Where not in" (0) | 2023.07.24 |
| 데이터베이스 설계 - 날짜를 기본 키의 일부로 사용해야 합니다. (0) | 2023.07.24 |