PHP, jQuery 및 AJAX를 사용하여 다중 파일 업로더를 구현하는 방법은 무엇입니까?

PHP, jQuery 및 AJAX를 사용하여 여러 파일이 포함된 파일 업로더를 구현하는 방법

여러 파일 선택을 활성화하는 파일 업로드 양식의 경우 에서 사용자는 일반적으로 "파일 추가" 버튼을 클릭하여 더 많은 '찾아보기' 버튼을 동적으로 추가합니다. 이 기능은 jQuery 및 AJAX를 사용하여 구현하여 양식을 제출하고 파일 업로드를 원격으로 처리할 수 있습니다.

초기 설정

처음에 '찾아보기' 버튼 하나로 HTML 양식을 만듭니다. . 필요에 따라 '찾아보기' 버튼을 동적으로 추가하려면 "파일 추가" 버튼을 포함하세요. 초기 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">

추가 파일 업로드 입력을 동적으로 추가하려면 "파일 추가" 버튼에 대한 JavaScript 함수 핸들러를 추가하세요.

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

서버측 구현 별도의 PHP 파일에 있는 파일 업로드 처리 논리 ('upload.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 클릭 핸들러를 수정하세요. 다음과 같습니다:

$('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;
});

이 코드는 양식 데이터에서 FormData 객체를 생성하고 적절한 AJAX 옵션을 설정합니다. 그리고 양식을 제출합니다. 서버 응답(이 경우 간단한 확인 메시지)이 경고 대화 상자에 표시됩니다.

이러한 수정을 통해 양식은 AJAX를 사용하여 동적으로 제출되므로 사용자는 한 번에 여러 파일을 업로드할 수 있습니다.

위 내용은 PHP, jQuery 및 AJAX를 사용하여 다중 파일 업로더를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!