비동기 다중 파일 업로드를 위해 jQuery의 `.submit()` 및 `.ajax()`를 사용하는 방법은 무엇입니까?

jQuery의 '.submit()' 및 '.ajax()'를 사용하여 AJAX를 통해 파일 제출

개요:

여러 파일을 서버에 업로드하는 것은 웹 개발의 일반적인 요구 사항입니다. jQuery의 '.submit()' 및 '.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:

JavaScript 코드 "파일 추가" 버튼이 선택된 경우 jQuery를 사용하여 추가 파일 입력 필드를 추가합니다. 클릭했습니다.

$(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 파일 제출을 위한 jQuery:

마지막으로 '.submit()' 및 ' .ajax()' 메소드는 이벤트 리스너를 제출 버튼에 바인딩하는 데 사용됩니다. 클릭 시 'upload.php' 스크립트로 AJAX 요청이 전달되며, 업로드된 파일 데이터는 FormData 객체를 이용하여 요청에 포함됩니다. 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;
});

이 접근 방식을 구현하면 PHP, jQuery 및 AJAX를 사용하여 여러 파일을 비동기식으로 효과적으로 업로드할 수 있습니다.

위 내용은 비동기 다중 파일 업로드를 위해 jQuery의 `.submit()` 및 `.ajax()`를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!