webuploader使用详解

最新推荐文章于 2024-09-26 10:29:40 发布

code301

最新推荐文章于 2024-09-26 10:29:40 发布

阅读量2.1w

点赞数 1

分类专栏： ThinkPHP 文章标签： webuploader 百度插件

本文链接：https://blog.csdn.net/AnPHPer/article/details/78194654

版权

ThinkPHP 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

近日项目中用到了百度的图片上传插件。有很多人第一次估计不知道应该如何使用，下面详细介绍如何将webuploader引入到项目中：

单次支持最大上传300张图片，不得不说功能强大。

官网下载地址：http://fex.baidu.com/webuploader/

下载下来解压后你会看到如下文件

直接将这个文件夹丢在项目中public/admin/webuploader下

官网说了我们需要引入

<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css">

<!--引入JS-->
<script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>

<!--SWF在初始化的时候指定，在后面将展示-->

然后你还需要一个HTML容器来选择需要上传的图片

    <div id="wrapper">
        <div id="container">
            <!--头部，相册选择和格式选择-->
            <div id="uploader">
                <div class="queueList">
                    <div id="dndArea" class="placeholder">
                        <div id="filePicker"></div>
                        <p>或将照片拖到这里，单次最多可选300张</p>
                    </div>
                </div>
                <div class="statusBar" style="display:none;">
                    <div class="progress">
                        <span class="text">0%</span>
                        <span class="percentage"></span>
                    </div><div class="info"></div>
                    <div class="btns">
                        <div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

当你将上述CSS，JS,HTML引入项目中后可能会出现页面无任何显示的情况，这时候你需要这样做(注意jquery.js与webuploader.js的引入顺序)

你或许会好奇SWF文件没有引入，其实SWF文件在upload.js里面进行了引入

接下来贴出全部代码:(这是批量上传，官网演示的其他上传类型同理)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>WebUploader演示</title>
    <link rel="stylesheet" type="text/css" href="//你的路径webuploader.css" />
    <link rel="stylesheet" type="text/css" href="//你的路径webuploader/examples/image-upload/style.css" />
</head>
<body>
    <div id="wrapper">
        <div id="container">
            <!--头部，相册选择和格式选择-->
            <div id="uploader">
                <div class="queueList">
                    <div id="dndArea" class="placeholder">
                        <div id="filePicker"></div>
                        <p>或将照片拖到这里，单次最多可选300张</p>
                    </div>
                </div>
                <div class="statusBar" style="display:none;">
                    <div class="progress">
                        <span class="text">0%</span>
                        <span class="percentage"></span>
                    </div><div class="info"></div>
                    <div class="btns">
                        <div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="//你的路径webuploader/examples/image-upload/jquery.js"></script>
    <script type="text/javascript" src="//你的路径webuploader/dist/webuploader.js"></script>
    <script type="text/javascript" src="//你的路径webuploader/examples/image-upload/upload.js"></script>
</body>
</html>

演示效果如下：