전송에 해당하는 글 1

Input File 선택 시 이벤트 및 비동기 전송

웹 프로그래밍/HTML - CSS|2022. 12. 24. 19:28
300x250

 

<input> 태그에서 파일을 선택했을때 비동기 이벤트를 처리하는 방법은 아래와 같다.

html 코드에는 input 파일을 넣어줘야 한다.

 

파일을 선택 또는 변경시 아래 uploadFile() 한수를 호출해서 결과를 넘긴다.

현재 코드는 json() 으로 되어있는데 text로도 변경할 수 있다.

<javascript>
document).on("change","#fileupload",function(){		 
	var result = uploadFile().then(text => {

	//처리 코드 입력
)};

async function uploadFile() {
    let formData = new FormData();           
    formData.append("upload_file", fileupload.files[0]);
    var response = await fetch('/comment_upload_ok.php', {
      method: "POST", 
      body: formData
    });    

	var text = response.json(); // json(), text() 선택
	return text;
}
</javascript>


<input id="fileupload" type="file" name="fileupload" />
300x250

댓글()