jquery多文件上传及预览-CFANZ编程社区

实现jquery多文件上传及预览

概述

在这篇文章中，我们将教会你如何使用jQuery实现多文件上传及预览功能。我们将按照以下步骤展示整个实现流程，并提供每一步所需的代码和注释。

流程展示

下表展示了完成这个任务的步骤和顺序。

步骤	描述
步骤一	创建HTML结构以呈现上传按钮和文件预览区域
步骤二	编写JavaScript代码以添加文件选择、上传和预览的功能
步骤三	样式美化与优化

步骤一：创建HTML结构

首先，我们需要创建HTML结构，用于呈现上传按钮和文件预览区域。以下是一个基本的HTML结构示例：

<!DOCTYPE html>
<html>
<head>
    <title>多文件上传及预览</title>
</head>
<body>
    <input type="file" id="fileInput" multiple>
    <button id="uploadButton">上传</button>
    <div id="previewContainer"></div>
</body>
</html>

步骤二：编写JavaScript代码

接下来，我们将编写JavaScript代码来添加文件选择、上传和预览的功能。以下是完整的JavaScript代码：

$(document).ready(function() {
    // 选择文件后触发事件
    $('#fileInput').change(function() {
        var files = $(this)[0].files; // 获取选择的文件列表
        var fileCount = files.length;

        // 遍历文件列表
        for (var i = 0; i < fileCount; i++) {
            var file = files[i];
            var reader = new FileReader();

            // 读取文件并显示预览
            reader.onload = function(e) {
                var preview = $('<img>').attr('src', e.target.result);
                $('#previewContainer').append(preview);
            }

            // 读取文件
            reader.readAsDataURL(file);
        }
    });

    // 点击上传按钮触发事件
    $('#uploadButton').click(function() {
        var files = $('#fileInput')[0].files; // 获取选择的文件列表
        var fileCount = files.length;

        // 创建FormData对象
        var formData = new FormData();

        // 添加文件到FormData对象
        for (var i = 0; i < fileCount; i++) {
            formData.append('files[]', files[i]);
        }

        // 发送文件到服务器
        $.ajax({
            url: 'upload.php',
            type: 'POST',
            data: formData,
            contentType: false,
            processData: false,
            success: function(response) {
                alert('上传成功');
                // 清空文件选择框和预览区域
                $('#fileInput').val('');
                $('#previewContainer').empty();
            },
            error: function() {
                alert('上传失败');
            }
        });
    });
});

代码解释：

当文件选择框的值发生变化时，触发change事件。
在change事件处理程序中，获取选择的文件列表，并遍历文件列表。
使用FileReader对象读取文件内容，并将预览图像添加到预览容器中。
在点击上传按钮时，触发click事件。
在click事件处理程序中，获取选择的文件列表，并创建FormData对象。
将选择的文件添加到FormData对象中。
使用ajax方法将文件发送到服务器，并在上传成功后清空文件选择框和预览区域。

步骤三：样式优化

最后，我们可以通过为上传按钮和预览区域添加一些样式来优化界面。以下是一个示例CSS代码：

#uploadButton {
    display: block;
    margin: 10px 0;
    padding: 10px 20px;
    background: #007bff;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

#previewContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#previewContainer img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border: 1px solid #ddd;
    border-radius: 3px;
}

甘特图

以下是一个使用mermaid语法表示的甘特图，展示了整个实现过程的时间分配：

gantt