AJAX, PHP 및 jQuery를 사용하여 여러 이미지를 효율적으로 업로드하려면 어떻게 해야 합니까?

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

이 토론에서는 AJAX 기술을 사용하여 여러 이미지를 업로드하는 문제를 다룹니다. 사용자는 AJAX를 통해 여러 파일을 전송하는 데 어려움을 겪어 파일 전달이 불완전해졌다고 설명합니다. 이 문서에서는 JSON을 활용하여 파일 객체를 효율적으로 처리하고 성공적인 업로드를 촉진하는 포괄적인 솔루션을 제공합니다.

HTML

다음 HTML 코드는 웹 페이지의 구조를 설정합니다. 드래그 앤 드롭 기능 요소, 파일 입력, 업로드 진행률 표시 섹션 등이 포함됩니다. 결과:

<div>
<p><strong>CSS</strong></p>
<p>파일 업로드 프로세스 중에 사용자 인터페이스를 향상하고 시각적 단서를 제공하기 위해 스타일이 적용되었습니다.</p>
<pre class="brush:php;toolbar:false">#uploads {
  display: block;
  position: relative;
}

#uploads li {
  list-style: none;
}

JavaScript

JavaScript 코드가 파일을 처리합니다. 업로드 프로세스, AJAX를 활용하여 서버와 통신합니다. 진행 상황 추적을 위해 JSON을 사용하여 파일 데이터와 HTML5 기술을 캡슐화합니다.

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

    // process file object
    $.each(This.files, function (i, file) {
        var reader = new FileReader(),
            dfd = new $.Deferred();
        reader.onload = function (e) {
            // convert file to data URL
            dfd.resolveWith(file, [e.target.result])
        };
        reader.readAsDataURL(new Blob([file], {
            "type": file.type
        }));
        dfd.then(function (data) {
            // send file data using AJAX
            $.ajax({
                url: "/echo/json/",
                type: "POST",
                data: {
                    "file": JSON.stringify({
                        "file": data,
                        "name": file.name,
                        "size": file.size,
                        "type": file.type
                    })
                }
            })
            .then(function (data, textStatus, jqxhr) {
                console.log(data)
                display.append("<br>

", img, "

"); return data }, function (jqxhr, textStatus, errorThrown) { console.log(errorThrown); return errorThrown }); }) }); });

PHP

PHP 스크립트는 JSON 형식으로 인코딩된 파일 데이터를 수신하여 반환합니다. JSON 문자열로:

<?php if (isset($_POST["file"])) {
    // process file object
    $file = json_encode($_POST["file"]);
    // return file as JSON string
    echo $file;
};
?>

이러한 기술을 구현하면 AJAX를 사용하여 여러 이미지를 효율적으로 업로드할 수 있습니다. PHP와 jQuery. JSON 접근 방식은 파일 전송을 단순화하고, 진행률 추적을 사용하면 업로드 상태에 대한 실시간 피드백을 제공하여 사용자 경험을 향상시킵니다.