개발 도중에 그리드상에 Row 를 추가하며, Row 상의 한 Cell 에 파일업로드 선택버튼이 있어 파일을 선택한 후 업로드를 해야하는 일이 발생되었다. 이런저런 방법을 고민해 보았으나 그리드 전체를 form 으로 걸어 submit 하지 않는 이상 방법이 없었다.
결국 DWR을 이용하여 해결해보기로 하고 자료를 찾아보았다. 일단 눈에 띄는 대부분의 글은 DWR을 이용한 파일업로드 프로그레스바에 대한 설명이었다. 나외에도 DWR을 이용한 파일업로드를 묻는 사람이 많다는데 놀랐다. 열심히 검색한 결과 하나의 결과물을 찾을 수 있었다. http://apps.tibco.com/dwr/files/upload.html 이외에도 몇가지 예제가 있으나 모두 org.directwebremoting.export.FileUpload 라는 클래스를 사용하고 있었다. dwr.jar 를 뒤져보았으나 그런 클래스는 없었다.
다시 조사를 해보았다. http://bugs.directwebremoting.org/bugs/browse/DWR-331 외에 DWR Jira에 관련 된 글이 올라와 있었다. https://dwr.dev.java.net/servlets/ProjectDocumentList 에서 버젼별로 확인해본 결과 DWR 3.0 M1 이상부터 지원됨을 알았다. 상용서비스에 정식버젼도 아닌 놈을 사용 할 수는 없는 노릇... 다시 찾아보았다. 그러다 발견한 것이 이것이다. http://bugs.directwebremoting.org/bugs/browse/DWR-25;jsessionid=9980AE210BB64BA3E7B3B089170F3722?page=com.atlassian.jira.plugin.system.issuetabpanels:all-tabpanel
역시 DWR Jira 에서 찾아낸 것인데... form 을 이용하여 submit 해서 화면이 바뀌지 않길 원하는 경우 사용가능한 케이스이다. 외부에 별도의 form을 이용해서 iframe을 통해 업로드 가능하게 하는 방법이다. 소스는 아래와 같다.
<html>
<head>
<script>
function asyncUpload() {
var theFile = document.getElementById("theFile");
var fileParent = theFile.parentNode;
// create a div with a hidden iframe and form
var theDiv = document.createElement('div');
theDiv.style.display = 'none';
theDiv.innerHTML =
'<iframe id="hidden_frame" name="hidden_frame" src=""></iframe>' +
'<form id="hidden_form" target="hidden_frame" action="/sandbox2/async/fileUpload.do" enctype="multipart/form-data" method="post"></form>';
document.body.appendChild(theDiv);
var hiddenForm = document.getElementById("hidden_form");
fileParent.removeChild(theFile);
// attach the file to the hidden form
hiddenForm.appendChild(theFile);
hiddenForm.submit();
hiddenForm.removeChild(theFile);
// put th file back where it came from
fileParent.appendChild(theFile);
// can't remove div yet, frame may not have loaded
//document.body.removeChild(theDiv);
}
</script>
</head>
<body>
<div><input name="theFile" id="theFile" type="file"></div>
<a href="javascript:asyncUpload()">Async Upload</a>
</body>
</html>
<head>
<script>
function asyncUpload() {
var theFile = document.getElementById("theFile");
var fileParent = theFile.parentNode;
// create a div with a hidden iframe and form
var theDiv = document.createElement('div');
theDiv.style.display = 'none';
theDiv.innerHTML =
'<iframe id="hidden_frame" name="hidden_frame" src=""></iframe>' +
'<form id="hidden_form" target="hidden_frame" action="/sandbox2/async/fileUpload.do" enctype="multipart/form-data" method="post"></form>';
document.body.appendChild(theDiv);
var hiddenForm = document.getElementById("hidden_form");
fileParent.removeChild(theFile);
// attach the file to the hidden form
hiddenForm.appendChild(theFile);
hiddenForm.submit();
hiddenForm.removeChild(theFile);
// put th file back where it came from
fileParent.appendChild(theFile);
// can't remove div yet, frame may not have loaded
//document.body.removeChild(theDiv);
}
</script>
</head>
<body>
<div><input name="theFile" id="theFile" type="file"></div>
<a href="javascript:asyncUpload()">Async Upload</a>
</body>
</html>
내용은 쉬우니 별도의 설명은 하지 않겠다. 비록 DWR을 이용 할 수는 없지만 hidden form과 iframe을 이용하여 결국엔 Ajax나 DWR과 비슷한 효과를 볼 수 있는 좋은 방법이라 생각된다.
이올린에 북마크하기
이올린에 추천하기
