jQuery, AJAX 및 PHP를 사용하여 여러 파일을 업로드하는 방법은 무엇입니까?

Mary-Kate Olsen
풀어 주다: 2024-11-23 04:59:12
원래의
335명이 탐색했습니다.

How to Upload Multiple Files Using jQuery, AJAX, and PHP?

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

사용자가 여러 파일을 업로드할 수 있도록 jQuery를 사용하여 "파일 추가" 버튼을 클릭하면 추가 파일 입력 필드를 동적으로 추가합니다:

$(document).ready(function(){
    $('.add_more').click(function(e){
        e.preventDefault();
        $(this).before("<input name='file[]' type='file' />");
    });
});
로그인 후 복사

PHP 파일 처리

양식 작업 속성은 파일 업로드를 처리할 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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿