안녕하세요. 명월입니다.
이 글은 [PHP] ajaxForm을 이용한 파일 업로드(프로그래스바로 파일 업로드 상태를 표시하는 방법)에 대한 글입니다.
이전에 제가 ajax로 file를 바이너리로 변환한 다음에 업로드하는 방법을 소개한 적이 있습니다.
링크 - [Jquery] ajax를 이용해 파일 업로드하는 방법
그 때 소개하는 방법은 multipart/form-data의 설정없이, 서버의 업로드 파일 크기 설정없이 구현이 가능하다는 장점이 있습니다.
문제는 파일 전송 중에 커넥션이 끊겼을 경우, 어떻게 처리할 것인지 참 애매한 방법이었습니다.
이번에는 multipart/form-data로 설정은 변함없이 하고 submit을 ajax로 옮겨서 업로드하는 방법입니다. 편의상 서버사이드는 PHP로 작성했습니다.
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
move_uploaded_file($_FILES["data"]["tmp_name"], $_FILES["data"]["name"]);
}
?>
<!DOCTYPE html>
<html>
<head>
<title>title</title>
<!-- 프로그래스바 Jquery UI -->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<form enctype="multipart/form-data">
<input type="file" name="data">
<input type="submit">
</form>
<br />
<br />
<div class="progress-label"></div>
<div id="progressbar"></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<!-- form submit처리를 ajax형식으로 옮기는 라이브러리 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script>
<!-- 프로그래스바 Jquery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
// jquery progress bar 세팅
var progressbar = $("#progressbar");
var progressLabel = $(".progress-label");
progressbar.progressbar({
value: true,
change: function() {
progressLabel.text("Current Progress: " + progressbar.progressbar("value") + "%");
},
complete: function() {
progressLabel.text("Complete!");
$(".ui-dialog button").last().trigger("focus");
}
});
// form을 ajaxForm으로 바꾼다.
$('form').ajaxForm({
url: "upload.php", // upload할 경로
type: "POST", // method 타입(파일 업로드면 반드시 POST다)
beforeSubmit: function(arr, $form, options) {
// submit 시작 전에 호출되는 이벤트 이벤트
progressbar.progressbar( "value", 0 );
},
uploadProgress: function(event, position, total, percentComplete) {
// 업로드 중의 progress 이벤트
progressbar.progressbar( "value", percentComplete );
},
success: function(text, status, xhr, element) {
// 업로드 완료되면 호출되는 이벤트
progressbar.progressbar( "value", 100 );
}
});
});
</script>
</body>
</html>
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
move_uploaded_file($_FILES["data"]["tmp_name"], $_FILES["data"]["name"]);
}
마지막으로 PHP에서 파일 요청 사이즈를 설정하는 부분입니다.
이제 설정은 완료되었습니다. apache를 기동하고 파일을 업로드 하겠습니다.
업로드 전의 이미지입니다. 파일은 150메가 정도 크기의 바이너리 데이터입니다.
업로드를 시작하겠습니다.
저는 특별히 경로를 지정하지 않고 그냥 htdocs폴더에 저장하였습니다.
참조 링크 - http://jquery.malsup.com/form/#api
참조 링크 - https://jqueryui.com/progressbar/
참조 링크 - PHP 파일 업로드 크기 설정
여기까지 ajaxFrom을 이용한 파일 업로드(프로그래스바로 파일 업로드 상태를 표시하는 방법)에 대한 설명이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Development note > PHP' 카테고리의 다른 글
| [PHP] 직렬화(Serializable) (0) | 2019.11.09 |
|---|---|
| [PHP] PHP와 JSP 간의 Session 공유(WDDX) (2) | 2019.11.08 |
| [PHP] PHP에서 파일을 압축 또는 해제하는 방법 (0) | 2019.11.07 |
| [PHP] htmlParser(phpquery라이브러리)를 이용해 XML파일(HTML)을 사용하는 방법 (0) | 2019.11.06 |
| [PHP] String 객체를 다루는 방법 (EOT, ob_start, ob_get_contents, ob_end_clean, ob_end_flush) (0) | 2019.10.26 |
| [PHP] PHPMailer 라이브러리를 이용해서 메일 발송하는 방법 (0) | 2019.10.19 |
| [PHP] PHP의 HttpConnection 도구 cURL 사용 방법 (0) | 2019.10.18 |
| [PHP] Apache 환경의 같은 호스트 안에서 PHP와 Java(Servlet)를 동시에 기동, 운영하는 방법 (0) | 2019.10.17 |