■ input type="file" 없이 파일 전송하기
-. 지난 포스팅에서 AJAX로 파일 업로드하는 방법을 살펴보았다.([AJAX] AJAX를 사용하여 파일 업로드 하기)
-. 사실 저 방법을 필자가 가장 많이 사용하는 이유는 기존 <input type="fils"/>의 형태를 숨기기위해서 사용하는 경우가 잦다.
-. 포스팅 제목을 type="file"없이 라고는 했지만 실질적으로 type="file" 없이 파일 숨기고 전송하기가 된다.
※ 기존의 파일 업로드 방식
# 소스코드
updateButton.php
|
<html>
<head>
<title>:: AJAX 파일전송 ::</title>
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript">
function ajaxFileUpload() {
// 업로드 버튼이 클릭되면 파일 찾기 창을 띄운다.
jQuery("#ajaxFile").click();
}
function ajaxFileChange() {
// 파일이 선택되면 업로드를 진행한다.
ajaxFileTransmit();
}
function ajaxFileTransmit() {
var form = jQuery("ajaxFrom")[0];
var formData = new FormData(form);
formData.append("message", "파일 확인 창 숨기기");
formData.append("file", jQuery("#ajaxFile")[0].files[0]);
jQuery.ajax({
url : "./ajaxFormReceive.php"
, type : "POST"
, processData : false
, contentType : false
, data : formData
, success:function(json) {
var obj = JSON.parse(json);
}
});
}
</script>
</head>
<body>
<form id="ajaxFrom" method="post">
<!-- display:none으로 화면상에서 파일 확인 창을 숨겨둔다 -->
<input type="file" id="ajaxFile" onChange="ajaxFileChange();" style="display:none;"/>
<input type="button" onClick="ajaxFileUpload();" value="업로드"/>
</form>
</body>
</html>
|
# 출력결과
① <input type="file">의 모습은 볼 수 없다. 업로드 버튼을 눌러 파일을 업로드 한다.
② 파일이 한번에 업로드 되는 것을 확인 할 수 있다.
