[JavaScript] iframe을 이용하여 ajax인 척 파일업로드 (jquery, file upload, ajax, iframe)
JavaScript 2014. 6. 8. 16:32<input type="file" 을 ajax로 보내려고 한다 할 때,
원칙대로 하자면 FormData를 만들어서 정정당당하게 보내는 방법이 있겠으나,
거지같은 하위버전 브라우저를 커버하려면 iframe을 하나 파서 보내는 수 밖에 없음.
대략 아래와 같은 형태.
1. 보이지 않는 <iframe>을 하나 만든다.
2. 보이지 않는 <form>을 하나 만든다.
3. <form>에 보내고자 하는 <input type="file" 을 append
4. <form>의 target을 <iframe>의 name으로 지정
5. <form> submit을 하고 <iframe>의 onload 이벤트 핸들러를 통해 결과값을 받기.
아래는 간략한 예제.
<script>
// files, action URL, response를 받을 callback을 지정
function ajaxFileUpload(files, action, callback)
{
// iframe의 name이자, form의 target
var target_name = 'iframe_upload';
// form 생성
var form = $('<form action="'+action+'" method="post" enctype="multipart/form-data" style="display:none;" target="'+target_name+'"></form>');
$('body').append(form);
// 전송할 file element를 갖다 붙임
files.appendTo(form);
// iframe 생성
var iframe = $('<iframe src="javascript:false;" name="'+target_name+'" style="display:none;"></iframe>');
$('body').append(iframe);
// onload 이벤트 핸들러
// action에서 파일을 받아 처리한 결과값을 텍스트로 출력한다고 가정하고 iframe의 내부 데이터를 결과값으로 callback 호출
iframe.load(function(){
var doc = this.contentWindow ? this.contentWindow.document : (this.contentDocument ? this.contentDocument : this.document);
var root = doc.documentElement ? doc.documentElement : doc.body;
var result = root.textContent ? root.textContent : root.innerText;
callback(result);
// 전송처리 완료 후 생성했던 form, iframe 제거
form.remove();
iframe.remove();
});
form.submit();
}
$(document).ready(function(){
$('#btn_submit').click(function(){
ajaxFileUpload($('input:file'), '/upload.php', function(result){
// response = result
//console.log('result = '+result);
});
});
});
</script>
<body>
<input type="file" name="upload[]" /><br />
<input type="file" name="upload[]" /><br />
<input type="file" name="upload[]" /><br />
<input type="button" id="btn_submit" value="파일업로드" />
</body>
'JavaScript' 카테고리의 다른 글
| [JavaScript] 브라우저가 파일업로드를 지원하는지 알아보기 (mobile browser, input file) (0) | 2014.06.30 |
|---|---|
| [JavaScript] jquery 로드여부 판별하여 동적 로딩 (jQuery, dynamic load) (0) | 2014.06.11 |
| [JavaScript] window.ShowModalDialog가 사라진다. (0) | 2014.05.11 |
| [JavaScript] cross-domain localStorage (0) | 2014.04.17 |
| [JavaScript] 부동소수점 비교연산 (floating point math) (0) | 2014.04.08 |
