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

AJAX, PHP 및 jQuery를 사용하여 여러 이미지 업로드

AJAX를 사용하여 여러 이미지를 업로드하는 것은 익숙하지 않은 경우 어려울 수 있습니다. 프로세스. 이 기사에서는 HTML, jQuery/AJAX 및 PHP 코드의 주요 구성 요소를 강조하면서 관련 단계를 안내합니다. 또한 솔루션을 설명하기 위해 작업 코드 예제도 제공합니다.

HTML

HTML 코드는 사용자가 업로드할 여러 이미지를 선택할 수 있는 양식을 정의합니다. 여기에는 사용자가 한 번에 두 개 이상의 이미지를 선택할 수 있는 다중 속성이 있는 입력 필드가 포함되어 있습니다. 또한 업로드 상태를 나타내기 위해 각 파일에 대한 진행률 표시줄을 추가할 것입니다.

<form>

jQuery/AJAX

jQuery/AJAX 코드가 파일 업로드를 처리합니다. 프로세스. 사용자가 파일을 선택할 때 업로드를 트리거하기 위해 변경 이벤트를 사용합니다. 그런 다음 선택한 각 파일을 반복하여 각 파일에 대한 새로운 진행률 표시줄을 만듭니다.

$(document).on("change", "input[name^='file']", function(e){
    e.preventDefault();
    var This    =   this,
        display =   $("#uploads");

    // list all file data
    $.each(This.files, function(i, obj){
        // for each image run script asynchronous
        (function(i) {
            // get data from input file
            var file = This.files[i],
                name = file.name,
                size = file.size,
                type = file.type,
                lastModified        =   file.lastModified,
                lastModifiedDate    =   file.lastModifiedDate,
                webkitRelativePath  =   file.webkitRelativePath,
                //slice               =   file.slice,
                i = i;

            // DEBUG
       /*
            var acc = []
            $.each(file, function(index, value) {
                acc.push(index + ": " + value);
            });
            alert(JSON.stringify(acc));
        */

            $.ajax({
                url:'/ajax/upload.php',
                contentType: "multipart/form-data",
                data:{
                        "image":
                        {
                            "name":name,
                            "size":size,
                            "type":type,
                            "lastModified":lastModified,
                            "lastModifiedDate":lastModifiedDate,
                            "webkitRelativePath":webkitRelativePath,
                            //"slice":slice,
                        }
                    },
                type: "POST",
                // Custom XMLHttpRequest
                xhr: function() {
                    var myXhr = $.ajaxSettings.xhr();
                    // Check if upload property exists
                    if(myXhr.upload)
                    {
                        // For handling the progress of the upload
                        myXhr.upload.addEventListener("progress",progressHandlingFunction, false); 
                    }
                    return myXhr;
                },
                cache: false,
                success : function(data){
                    // load ajax data
                    $("#listTable").append(data);
                }
            });
            // display progress
            function progressHandlingFunction(e){
                if(e.lengthComputable){
                    var perc = Math.round((e.loaded / e.total)*100);
                    perc = ( (perc >= 100) ? 100 : ( (perc <= 0) ? 0 : 0 ) );
                $("#progress"+i+" > div")
                    .attr({"aria-valuenow":perc})
                        .css("width", perc+"%");
                }
            }
            // display list of files
            display.append('<li>'+name+'</li><div class="progress">

PHP

마지막으로 PHP 코드는 서버 측. 업로드된 파일을 받아 처리합니다.

<?php
    if (isset($_POST["image"])) {
        // do php stuff
        // call `json_encode` on `file` object
        $file = json_encode($_POST["file"]);
        // return `file` as `json` string
        echo $file;
    }
?>

결론

이러한 구성 요소를 결합하면 AJAX, PHP 및 jQuery를 사용하여 여러 이미지 업로드를 달성할 수 있습니다. 이 기능을 통해 사용자는 여러 이미지를 한 번에 편리하게 업로드할 수 있어 사용자 경험이 향상되고 파일 업로드 프로세스가 간소화됩니다.

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