PHP and Ajax: Real-time file upload function

How to implement real-time file upload using PHP and Ajax? Configure file upload and set permissions in PHP. Create a server-side script to handle the upload. Write a client-side script using jQuery to handle Ajax requests. Add a file input box and submit button to the HTML form. Use Ajax to asynchronously send files to the server and receive upload status without reloading the page.

PHP and Ajax: Real-time file upload

Introduction

Ajax (Asynchronous JavaScript and XML) technology allows asynchronous communication with the server without reloading the entire page. Combined with PHP, we can create a real-time file upload function that provides real-time feedback to the user.

Configuration

In order to use Ajax, we need to communicate between PHP and JavaScript scripts. This example uses the jQuery library to handle Ajax requests from the client. In the PHP settings, make sure file uploads are allowed and the appropriate permissions are set.

Server-side script (upload.php)

<?php
if (isset($_FILES['file'])) {
    $file = $_FILES['file'];

    // 验证并移动上传的文件
    if (move_uploaded_file($file['tmp_name'], 'uploads/' . $file['name'])) {
        echo '文件上传成功！';
    } else {
        echo '文件上传失败！';
    }
}
?>

Client-side script (upload.js)

$(document).ready(function() {
    $("#file-form").submit(function(e) {
        e.preventDefault();

        let formData = new FormData(this);

        $.ajax({
            url: 'upload.php',
            type: 'POST',
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data) {
                alert(data);
            },
            error: function() {
                alert('请求失败！');
            }
        });
    });
});

HTML Form

<form id="file-form" enctype="multipart/form-data">
    <input type="file" name="file">
    <input type="submit" value="上传">
</form>

Practical Case

This is a file selector interface that uploads files to the server in real time. The user can select a file and it will be sent asynchronously to the server in an xhr request. The server script validates and stores the file and sends a response to the client indicating success or failure of the upload. This way the user can see the upload results without reloading the page.

The above is the detailed content of PHP and Ajax: Real-time file upload function. For more information, please follow other related articles on the PHP Chinese website!