현재 jsp 아주초보단계 배우는 중이라.. 제이쿼리 등등을 사용하지 않은채로 시도중입니다.
구글링하다가 js만 사용한, 굉장히 심플한 ajax 예제를 찾아서 방식만 이해한 상태인데요,
form이 파일 업로드를 위해 <enctype='multipart/form-data'> 로 되어있을때 ajax를 사용해 전달을 하고 싶은데요...
일단 참고한 ajax 기본 예제는
이 주소 참고를 하였고,
업로드 쪽 폼은 아래와 같은 형태이고
<form name='upload' method='POST' enctype='multipart/form-data'>
<table class='table'>
<tr>
<TH class='th' style='width: 20%;'>이미지 첨부</TH>
</tr>
<tr>
<TD class='td_createform'><input style='width: 80%; margin: 0; padding: 0; border: 0;' type='file' accept="image/*" name='imagefile' maxlength='10'>
<input type='button' value='올리기' onclick="requestUpload('upload_process.jsp')">
</TD>
</tr>
</table>
</form>
<div id='upload_result'></div>
ajax 예제를 돌리기 위한 javascript 부분은 아래와 같습니다.
var xhr = null;
function getXMLHttpRequest(){
if(window.ActiveXObject){
try{
return new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e1){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e2){
return null;
}
}
}
else if(window.XMLHttpRequest){
return new XMLHttpRequest();
}
else
{
return null;
}
}
function requestUpload(URL){
param =upload.imagefile.value;
//URL = URL + "?name=" + encodeURIComponent(param);
xhr = getXMLHttpRequest();
xhr.onreadystatechange = responseUpload;
xhr.open("POST", URL, true);
alert( param );
xhr.send( encodeURIComponent(param) );
}
function responseUpload()
{
if(xhr.readyState==4)
{
if(xhr.status == 200)
{
var str = xhr.responseText;
document.getElementById("upload_result").innerHTML = str;
alert("success");
}
else
{
alert("Fail : " + xhr.status);
}
}
일단 시도를 하면 upload_process.jsp로 뭔가 넘어는 가는데,
제대로 넘어가는것 같진 않습니다...
아무래도 multipart/form-data 타입으로 제대로 전송이 안되는듯한데요...
jquery를 사용하면 쉽게 가능한지 예제가 이런저런게 많이 나오긴 하는데...
jquery를 아직 배우지 못해서...
jquery 사용하지 않고
넘길 수 있는 방법이 없을까요?
글쓰기