webuploader使用详解
来源:互联网 发布:mendeley mac 编辑:程序博客网 时间:2024/05/29 09:49
近日项目中用到了百度的图片上传插件。有很多人第一次估计不知道应该如何使用,下面详细介绍如何将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>演示效果如下:
支持旋转和删除和上传前的预览
当然有小伙伴可能会问上传的路由在哪里,如下,upload.js140行左右。只需要将server改成你的目标路由就好啦
在上传时我们可以打开网络控制台
我们可以看到请求里面包含了上传图片的MIME类型与图片类型以及form-data属性name=file。name在控制器里我们只需要一句代码就可以接收到上传过来的图片,从而进行后续操作
$file = request()->file('file');
阅读全文
0 0
- webuploader使用详解
- WebUploader使用
- webuploader 使用实例
- webuploader的使用
- 使用WebUploader上传图片
- webuploader插件使用分析
- webuploader简单使用
- 使用validform、webuploader
- java 使用 WebUploader
- WebUploader插件使用常见问题
- webuploader
- webuploader
- webuploader
- 百度WebUPloader的使用入门
- webuploader图片组建的使用
- webuploader 使用心得 -1 简介
- 使用webuploader上传大文件
- webuploader的使用,mark一下
- nodejs之querystring模块
- Linux scp 使用详解
- CentOS 6.3安装Nginx 配…
- Spring Boot 之FilterRegistrationBean --支持web Filter 排序的使用
- 国土三调那些事儿
- webuploader使用详解
- yum搭建lnmp环境(CentOS6.3)
- yii使用gii为modules下的模块自动…
- 如何修改序列(Sequence)的初始值(S…
- APP测试工具选择
- jdk1.6+tomcat6 配置环境
- 2014年04月19日
- 地址栏汉字编码自动转换问题
- DWZ的ajaxTodo链接的浏览器…