// HTML page
<body>
<div>
<form name="frm" method="post" >
<button id="submit">전송</button><br/>
<span>파일선택</span><input name="solo_file" id="soloFile" type="file"><br/>
<!-- <input name="audio_files[]" type="file" multiple accept="audio/*" > -->
<span>파일여러개선택</span><input name="multi_file[]" id="multiFile" type="file" multiple ><br/>
<input name="test1" type="text" ><br/>
<textarea name="test2" rows="10" cols="10"></textarea><br/>
</form>
</div>
<script>
/*
자바스크립트 ajax를 사용하여 파일을 전송하고자 할때 유용하다.
FormData 객체는 폼의 각 필드 값을 키/값 쌍으로 자바스크립트로 폼 전송 체계를 구현한다.
FormData 는 console.log로 확인 안된다. 크롬개발자도구(Network) XHR로 확인하자.
*/
function ajaxSend() {
var formData = new FormData();
formData.append("test1", $(":text").val());
formData.append("test2", $("textarea").val());
formData.append("solo_file", $("#soloFile")[0].files[0]); //파일 한개
//file multiple 전송시 다음과 같이 반복문으로 추가한다. //파일 여러개
$($("#multiFile")[0].files).each(function(index, file) {
formData.append("multi_file[]", file);
});
$.ajax({
url: './test_b.html',
type: "post",
processData: false, // file전송시 필수
contentType: false, // file전송시 필수
data: formData
})
.done(function(data) {
//console.log(data);
})
}
$("#submit").click(function(e) {
e.preventDefault();
ajaxSend();
});
</script>
</body>
// PHP page
<?
$test1 = $_POST['test1'];
$test2 = $_POST['test2'];
$solo_file = $_FILES["solo_file"];
$multi_file = $_FILES["multi_file"];
?>
출처 :
http://www.code-hound.com/upload-multiple-files-at-once-with-jquery-and-php/
https://www.youtube.com/watch?v=mG9yIBq2-c8
http://www.prodevtips.com/2012/06/07/multiple-file-uploads-and-progress-bar-with-xhr2-and-jquery/
'JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 문자열 합치기 팁 - 배열 join (0) | 2016.01.14 |
|---|---|
| [JavaScript] Object.keys, json Object 반복문 돌리기 for...in 문 (0) | 2015.11.16 |
| [javaScript] replace 문자열 변경 - 두번째 파라미터 함수 filter기능 (0) | 2015.11.11 |
| [javaScript] switch 반복문 (0) | 2015.10.27 |
| [JavaScript] call, apply (0) | 2015.10.15 |
