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技术站

(0)
上一篇 2023年5月20日
下一篇 2023年5月20日

相关文章

  • AngularJS基于provider实现全局变量的读取和赋值方法

    要实现全局变量的读取和赋值,可以使用AngularJS中的provider。 provider是AngularJS中的一个服务提供者,它可以在config阶段(即AngularJS框架初始化之前)注入到AngularJS应用中。用它可以将服务定义成可配置的,在应用配置阶段根据需要进行一些配置。 使用provider实现全局变量的读取和赋值,需要先定义一个pr…

    Java 2023年6月15日
    00
  • JDO 2.0查询语言的特点

    JDO(Java Data Object) 是一种面向对象的数据持久化框架,它提供了一个标准API来使得Java应用程序与关系型数据库交互。JDO 2.0版本提供了一个强大的查询语言,下面我们详细讲解其特点。 JDO 2.0查询语言的特点: 1. 支持“from”语法 查询语句以“from”关键词开始,后面接一个或多个表名或实体类名。示例: SELECT e…

    Java 2023年6月15日
    00
  • 实例详解java Struts2的配置与简单案例

    实例详解Java Struts2的配置与简单案例 简介 Java Struts2是MVC框架中的一种,它通过将应用程序分成模型、视图和控制器三个部分,从而使得开发人员能够更加清晰地组织代码并且更加容易地维护代码。 本文将会通过具体的操作步骤详细说明如何在Java Struts2中进行配置,并且给出两个简单的案例。 配置步骤 步骤一:下载和安装Java Str…

    Java 2023年5月20日
    00
  • IntelliJ IDEA怎么创建并运行java程序?

    那我来给您详细讲解 IntelliJ IDEA 怎么创建并运行 Java 程序的完整攻略。 一、创建 Java 项目 打开 IntelliJ IDEA,点击 Create New Project; 在弹出窗口中选择 Java 选项,然后选择 SDK 版本和项目类型,并在 Project Name 中输入您想要的项目名称; 点击 Next,继续进行配置,直到完…

    Java 2023年5月19日
    00
  • Java8深入学习之熟透Optional

    Java8深入学习之熟透Optional Java8引入了Optional类型,用于解决空指针异常问题。本文将深入讲解Optional的使用,并提供完整攻略,以帮助读者更好地使用和理解Optional。 什么是Optional? Optional是Java8引入的一个容器(Container)对象,用于处理空指针异常。它可以包含一个非null的对象,也可以为…

    Java 2023年5月26日
    00
  • 微信小程序填写用户头像和昵称实现方法浅析

    微信小程序填写用户头像和昵称实现方法浅析 在开发微信小程序时,需要获取用户信息,其中包括用户头像和昵称。下面将介绍如何实现微信小程序中用户头像和昵称的获取。 获取用户信息的基本步骤 获取用户授权:在小程序中使用 wx.getUserInfo 方法获取用户信息前,必须先执行授权。 wx.getUserInfo({ success: function(res) …

    Java 2023年5月23日
    00
  • 搭建java WEB开发环境和应用

    搭建Java Web开发环境和应用攻略 环境 搭建Java Web开发环境需要的软件包括: JDK(Java Development Kit) IDE(Integrated Development Environment) Tomcat(Web服务器) MySQL(关系型数据库) JDK JDK是Java开发SDK,是Java程序员开发Java程序的必备软件…

    Java 2023年5月19日
    00
  • 浅析Bean Searcher 与 MyBatis Plus 区别介绍

    浅析Bean Searcher与MyBatis Plus区别介绍 1. 简介 1.1 Bean Searcher Bean Searcher是一款基于Java注解的ORM框架,支持MySQL、SQLite、H2等关系型数据库。其主要特点是简单易用、注解使用方便、API完整,并支持复杂的查询生成。 1.2 MyBatis Plus MyBatis Plus是M…

    Java 2023年5月20日
    00
合作推广
合作推广
分享本页
返回顶部