> 백엔드 개발 > PHP 튜토리얼 > 비동기 다중 파일 업로드를 위해 jQuery의 `.submit()` 및 `.ajax()`를 사용하는 방법은 무엇입니까?

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

DDD
풀어 주다: 2024-11-27 05:36:14
원래의
698명이 탐색했습니다.

How to Use jQuery's `.submit()` and `.ajax()` for Asynchronous Multiple File Uploads?

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

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