ajaxFileupload实现多文件上传功能

下面我会为你讲解一下如何使用ajaxFileupload实现多文件上传功能，包含两个示例。

什么是ajaxFileupload？

ajaxFileupload 是基于jQuery 的一个文件上传插件，支持异步上传文件，将文件上传到服务器的同时还支持在当前页面显示文件上传的进度。

实现步骤

以下是实现ajaxFileupload上传文件功能的步骤：

1. 引入必要的文件

首先要把必要的文件引入，主要就是jquery和ajaxfileupload.js：

<script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajaxfileupload/3.0.1/ajaxfileupload.js"></script>

2. 编写上传文件的表单

在html中加入一个表单，表单中包含一个选择文件的input和一个上传按钮：

<form id="uploadForm" method="post" enctype="multipart/form-data">
    <input type="file" name="file" multiple>
    <button type="button" id="uploadBtn">上传</button>
</form>

需要注意的是，这里需要设置input的multiple属性，才能实现多文件上传。

3. 使用ajaxFileupload发送上传请求

在上传按钮的点击事件中使用ajax上传文件，同时可以加入一些参数，比如上传成功之后的回调函数：

$("#uploadBtn").click(function() {
    // 需要上传的文件input
    var fileInput = $("input[name='file']");
    // 文件数据
    var fileData = fileInput[0].files;
    // 上传地址
    var uploadUrl = "/upload.php"; 
    // 自定义数据
    var extraData = {
        somekey: "somevalue",
        otherkey: "othervalue"
    };
    // 开始上传
    $.ajaxFileUpload({
        url: uploadUrl, //上传地址
        secureuri: false, 
        fileElementId: fileInput.attr("name"),//文件数据的变量名
        dataType: 'json',//返回值类型 一般设置为json
        data: extraData,//自定义参数
        success: function (data, status) {
            //上传成功的回调函数
        },
        error: function (data, status, e) {
            //上传失败的回调函数
        }
    });
});

这里需要注意的是，fileElementId一定要设置为文件选择input的name属性，dataType一定要设置为json，因为ajaxfileupload上传之后返回的结果数据类型是json。

4. 接收上传文件并保存到服务器

最后根据自己的实际情况在服务器端接收上传的文件，并且将上传成功之后的结果返回给前端页面。

示例1：上传文件到服务器

下面是一个上传文件到服务器的示例，上传页面代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ajaxFileupload上传文件到服务器</title>
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajaxfileupload/3.0.1/ajaxfileupload.js"></script>
</head>
<body>
    <form id="uploadForm" method="post" enctype="multipart/form-data">
        <input type="file" name="file" multiple>
        <button type="button" id="uploadBtn">上传</button>
    </form>
    <br />
    <div id="result"></div>
    <script>
        $("#uploadBtn").click(function() {
            // 需要上传的文件input
            var fileInput = $("input[name='file']");
            // 文件数据
            var fileData = fileInput[0].files;
            // 上传地址
            var uploadUrl = "/upload.php"; 
            // 开始上传
            $.ajaxFileUpload({
                url: uploadUrl, //上传地址
                secureuri: false, 
                fileElementId: fileInput.attr("name"),//文件数据的变量名
                dataType: 'json',//返回值类型 一般设置为json
                success: function (data, status) {
                    $("#result").html(data.message);
                },
                error: function (data, status, e) {
                    $("#result").html(e);
                }
            });
        });
    </script>
</body>
</html>

这里的上传地址是/upload.php，接收上传文件的php代码如下：

<?php
$uploadFile = $_FILES['file'];
$fileName = $uploadFile['name'];
$fileSize = $uploadFile['size'];
$fileType = $uploadFile['type'];
$error = $uploadFile['error'];
$tmpName = $uploadFile['tmp_name'];

if ($error) {
    $result = array('code' => -1, 'message' => '出错啦：' . $error);
} else {
    // 将文件移动到指定目录
    $moveResult = move_uploaded_file($tmpName, './uploads/' . $fileName);
    if ($moveResult) {
        $result = array('code' => 0, 'message' => '上传成功！');
    } else {
        $result = array('code' => -1, 'message' => '出错啦：无法移动文件。');
    }
}

echo json_encode($result);
?>

这里将上传的文件移动到了./uploads/目录下，上传成功之后会返回json格式的结果，页面上会显示上传的结果。

示例2：上传文件到七牛云存储

下面是一个上传文件到七牛云存储的示例，上传页面代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ajaxFileupload上传文件到七牛云存储</title>
    <script src="//cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajaxfileupload/3.0.1/ajaxfileupload.js"></script>
</head>
<body>
    <form id="uploadForm" method="post" enctype="multipart/form-data">
        <input type="file" name="file" multiple>
        <button type="button" id="uploadBtn">上传</button>
    </form>
    <br />
    <div id="result"></div>

    <script>
        $("#uploadBtn").click(function() {
            // 需要上传的文件input
            var fileInput = $("input[name='file']");
            // 文件数据
            var fileData = fileInput[0].files;
            // 上传地址
            var uploadUrl = "http://up.qiniu.com/"; 
            // 上传的文件名字，这里为了避免文件名重复使用时间戳
            var fileName = new Date().getTime().toString(36) + ".jpg";
            // 需要配置的：七牛上传凭证
            var token = "Your Token";
            // 需要配置的：七牛上传空间名
            var bucketName = "Your Bucket Name";

            // 开始上传
            $.ajaxFileUpload({
                type: 'post',
                url: uploadUrl, //上传地址
                secureuri: false, 
                fileElementId: fileInput.attr("name"),//文件数据的变量名
                dataType: 'json',//返回值类型 一般设置为json
                data: {
                    key: fileName, //上传的文件名字
                    token: token //七牛upload token
                },
                success: function (data, status) {
                    // 上传成功之后，将图片url返回并在页面显示
                    var qiniuUrl = "http://" + bucketName + ".qiniudn.com/" + fileName;
                    $("#result").html('<img src="' + qiniuUrl + '">');
                },
                error: function (data, status, e) {
                    $("#result").html(e);
                }
            });
        });
    </script>
</body>
</html>

这里使用ajaxFileupload上传文件到七牛云存储，需要在上传参数中加入几个必要的参数，比如：

上传地址要使用七牛云存储的上传地址：http://up.qiniu.com/
文件名字要用时间戳保证不会重复
配置七牛云存储的upload token和bucket name

上传成功之后，可以通过拼接七牛云存储的图片url来显示上传的图片。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：ajaxFileupload实现多文件上传功能 - Python技术站