jQuery上传多张图片带进度条样式（DEMO）

“jQuery上传多张图片带进度条样式（DEMO）”是一种基于jQuery的图片上传插件。它可以实现多张图片上传，并在上传过程中展示进度条样式。以下是使用该插件的完整攻略：

准备工作

在使用该插件之前需要先引入jQuery文件和插件文件。可以直接从官网下载插件文件，或者通过CDN加速，如下：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>

HTML代码

插件需要在HTML中构建表单上传文件，如下：

<form action="upload.php" method="post" enctype="multipart/form-data" id="uploadForm">
    <input type="file" name="images[]" multiple="multiple" id="uploadInput">
    <input type="submit" value="上传" id="uploadBtn">
</form>
<div id="progressBar"></div>

其中action属性为上传文件的处理地址；uploadInput属性为文件上传的表单项；multiple属性为启用多文件上传；uploadBtn为上传按钮；progressBar为进度条展示的容器。

JavaScript代码

初始化

在JavaScript中需要初始化该插件，如下：

$('#uploadForm').ajaxForm({
    beforeSend: function() {
        // 发送前的回调函数，一般用于表单验证
    },
    uploadProgress: function(event, position, total, percentComplete) {
        // 上传进度的回调函数
        var progressBar = $('#progressBar');
        progressBar.text(percentComplete + '%');
        progressBar.width(percentComplete + '%');
    },
    success: function(data) {
        // 上传成功的回调函数
        console.log(data);
    },
    complete: function(xhr) {
        // 上传完成的回调函数
    },
    error: function(xhr) {
        // 上传出错的回调函数
    }
});

其中ajaxForm方法是插件提供的一种初始化方法，用于以Ajax方式提交表单。在初始化的过程中可以传递多个回调函数：

• beforeSend：在发送请求前调用的回调函数。
• uploadProgress：在上传过程中调用的回调函数。
• success：上传成功后调用的回调函数。
• complete：上传完成后调用的回调函数。
• error：上传失败时调用的回调函数。

处理上传请求

在服务器端应该处理上传的请求，将文件保存在本地，一种示例性的服务器端PHP代码如下：

<?php
if ($_FILES['images']) {
    $files = $_FILES['images'];
    $count = count($files['name']);
    $result = array();
    for ($i = 0; $i < $count; $i++) {
        $tmp_path = $files['tmp_name'][$i];
        $name = $files['name'][$i];
        $new_name = md5(time() . $name) . '.' . pathinfo($name, PATHINFO_EXTENSION);
        $save_path = 'uploads/' . $new_name;
        move_uploaded_file($tmp_path, $save_path);
        array_push($result, $save_path);
    }
    echo json_encode($result);
}
?>

代码中使用move_uploaded_file将文件保存在当前目录的uploads文件夹里，并且将所有上传成功的文件返回给客户端。

示例说明

以下是两种示例说明：

示例1：取消上传

在上传的过程中，可以随时取消上传。为uploadBtn添加onclick事件，当点击上传按钮时，取消上传：

$('#uploadBtn').click(function() {
    var uploadForm = $('#uploadForm');
    var options = uploadForm.data('ajaxForm').options;
    options.data = {cancel: true};
    uploadForm.ajaxSubmit();
});

以上代码首先获取表单的上传插件选项options，并添加取消标识cancel。然后将表单提交给服务器。在服务器端可以检查是否出现了取消标识，如果出现就停止上传。

示例2：限制上传类型

在上传的过程中，可以限制上传文件的类型。在表单初始化过程中添加beforeSend回调函数，用于验证上传文件的类型：

beforeSend: function() {
    var inputFile = $('#uploadInput');
    var allowedTypes = ['image/jpeg', 'image/png', 'image/gif'];
    for (var i = 0; i < inputFile[0].files.length; i++) {
        var fileType = inputFile[0].files[i].type;
        if (allowedTypes.indexOf(fileType) === -1) {
            alert('只允许上传JPEG、PNG和GIF格式的图片！');
            return false;
        }
    }
},

以上代码首先获取上传文件的表单项，获取允许上传的文件类型数组allowedTypes，然后通过循环，检查所有上传的文件是否符合要求。如果不符合要求，则弹出一个警告对话框，阻止上传操作。