jQuery, AJAX 및 PHP를 사용하여 여러 파일 업로드
웹 양식에서 여러 파일을 서버는 웹 개발에서 일반적인 작업입니다. 이 기사에서는 PHP, jQuery 및 AJAX를 사용하여 여러 파일을 업로드하는 과정을 안내합니다.
첫 번째 단계는 사용자가 선택할 수 있는 양식을 만드는 것입니다. 그리고 파일을 업로드하세요. 다음 HTML 마크업은 처음에 하나의 파일 입력 필드를 포함하는 간단한 양식을 나타냅니다.
<form enctype="multipart/form-data" action="upload.php" method="post"> <input name="file[]" type="file" /> <button class="add_more">Add More Files</button> <input type="button">
사용자가 여러 파일을 업로드할 수 있도록 jQuery를 사용하여 "파일 추가" 버튼을 클릭하면 추가 파일 입력 필드를 동적으로 추가합니다:
$(document).ready(function(){ $('.add_more').click(function(e){ e.preventDefault(); $(this).before("<input name='file[]' type='file' />"); }); });
양식 작업 속성은 파일 업로드를 처리할 PHP 스크립트인 "upload.php"로 설정됩니다. 다음은 PHP 코드의 예입니다.
for($i=0; $i<count($_FILES['file']['name']); $i++){ $target_path = "uploads/"; $ext = explode('.', basename( $_FILES['file']['name'][$i])); $target_path = $target_path . md5(uniqid()) . "." . $ext[count($ext)-1]; if(move_uploaded_file($_FILES['file']['tmp_name'][$i], $target_path)) { echo "The file has been uploaded successfully <br />"; } else{ echo "There was an error uploading the file, please try again! <br />"; } }
AJAX를 사용하여 양식을 제출하려면 jQuery의 .submit() 및 .ajax() 메서드를 사용합니다. :
$('body').on('click', '#upload', function(e){ e.preventDefault(); var formData = new FormData($(this).parents('form')[0]); $.ajax({ url: 'upload.php', type: 'POST', xhr: function() { var myXhr = $.ajaxSettings.xhr(); return myXhr; }, success: function (data) { alert("Data Uploaded: "+data); }, data: formData, cache: false, contentType: false, processData: false }); return false; });
이 코드를 사용하면 파일 입력 필드를 동적으로 생성하고 파일 업로드를 처리할 수 있습니다. 서버 측에서 PHP를 사용하고 AJAX를 사용하여 비동기식으로 양식을 제출하면 페이지를 다시 로드하지 않고도 여러 파일을 업로드할 수 있습니다.
위 내용은 jQuery, AJAX 및 PHP를 사용하여 여러 파일을 업로드하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!