jQuery 업로드 파일 AJAX
객체와 유사한 구성은 주로 여러 키-값 쌍으로 AJAX를 정의합니다. 이러한 키와 값은 서버 측을 안내하고 서버에서 데이터를 읽고 서버로 데이터를 보낼 수 있도록 합니다.
jQuery를 사용하면 데이터나 파일을 서버에 게시하고 완전히 업로드되었는지 확인할 수 있는 예제를 쉽게 구현할 수 있습니다.
다음 섹션에서는 사용자로부터 입력 값을 받은 다음 나중에 서버에 게시하는 인스턴스를 다루려고 합니다. 또한 페이지를 다시 로드하지 않고 데이터가 업데이트되고 있는지도 검사합니다.
또한 업데이트되거나 게시된 데이터를 읽습니다. 단어를 더 잘 보기 위해 코드 세그먼트로 이동해 보겠습니다.
AJAX 및 jQuery를 사용하여 파일 및 입력 업로드
일반적으로 파일 업로드는 포스트 작업을 시각화하기가 더 쉽습니다. 따라서 이 경우에는 텍스트 입력 필드와 파일 입력 필드가 있습니다.
필드에 성공적으로 게시한 후에는 단호한 메시지와 추가된 데이터를 받게 됩니다.
이 작업을 위해 HTML 부분, jQuery 부분 및 마지막으로 PHP 파일을 사용합니다. 각 파일에는 사양이 있습니다.
HTML은 업로드 작업을 시작할 UI를 보여줍니다. 다음으로 jQuery 세그먼트는 id를 통해 입력 필드의 참조를 가져옵니다.
또한 여기에 AJAX를 추가하고 AJAX에 있는 PHP 파일을 URL로 연결하겠습니다. PHP 파일에는 데이터가 게시될 디렉토리 경로가 있으며 출력에서 결과를 볼 수 있습니다.
XAMMP 서버를 통해 Apache 소프트웨어를 사용합니다.
- 먼저 XAMMP를 설치하고 Apache를 시작해야 합니다.
- 또한 PHP를 설치하고 환경 변수 > 시스템 변수의 경로에 PHP의 경로를 추가해야 합니다.
- XAMMP 폴더로 이동하여
htdocs디렉터리를 찾습니다. htdocs디렉토리에서index.html,index.js및upload.php파일을 보관할 폴더를 만듭니다.- 이 새 폴더에
image라는 폴더를 만듭니다.
코드 조각:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload file</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js" integrity="sha512-2rNj2KJ+D8s1ceNasTIex6z4HWyOnEYLVC3FigGOmyQCZc2eBXKgOxQmo3oKLHyfcj53uz4QMsRCWNbLd32Q1g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="index.js"></script>
</head>
<body style="background-color: gray">
<div class="container" style="width:50%;margin:25%;background:white;border:2px solid white">
<div style="padding: 10px">
<form id="myform" method="post" enctype="multipart/form-data">
<div class="form-group">
<label for="Name"></label>
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
</div>
<div class="form-group">
<label for="Image"></label>
<input type="file" id="image" class="form-control" name="image" placeholder="Image">
</div>
<div class="form-group" style="height:10px"></div>
<div class="form-group">
<input type="submit" class="btn btn-primary" id="submit" name="submit" value="Send">
</div>
</form>
</div>
</div>
</body>
</html>
index.js:
$(document).ready(function() {
$('#submit').click(function(e) {
e.preventDefault();
var data = new FormData();
var form_data = $('#myform').serializeArray();
$.each(form_data, function(key, input) {
data.append(input.name, input.value);
});
var image = $('#image').val();
if (image != '') {
var file_data = $('input[name="image"]')[0].files;
for (var i = 0; i < file_data.length; i++) {
data.append('image[]', file_data[i]);
}
}
var request = $.ajax({
url: 'upload.php',
type: 'post',
processData: false,
contentType: false,
data: data,
});
request.done(function(response, textStatus, jqXHR) {
console.log('done!');
console.log(response);
});
request.fail(function(jqXHR, textStatus, errorThrown) {
console.log(textStatus);
console.log(errorThrown);
})
})
})
업로드.php:
<?php
$dir = __DIR__.'/image/'.$_FILES["image"]["name"][0];
if(move_uploaded_file($_FILES["image"]["tmp_name"][0], $dir))
{
$data = array(
"Status" => "Done",
"path" => $dir,
"Name" => $_POST['name'],
"Image" => $_FILES["image"]["name"][0]
);
echo json_encode($data);
}
else
{
$data = array(
"Status" => "Failed",
"path" => $dir,
"Name" => $_POST['name'],
"Image" => $_FILES["image"]["name"][0]
);
echo json_encode($data);
}
?>
출력:
다음으로 모든 설치 및 준비 후에 HTML에서 Bootstrap 및 jQuery CDN을 설정하고 코드를 따랐습니다. 양식 입력을 반복하기 위해 $.each() 메서드를 사용했습니다.
마지막으로 브라우저로 이동하여 localhost/"folder_name(inside the htdocs)"를 입력하면 예제와 유사한 UI가 표시됩니다. 그리고 데모에서와 같이 콘솔에서 세부 사항을 구현해보고 프로젝트 폴더의 image 폴더를 확인하여 파일이 제대로 업로드되었는지 확인하십시오.
