webuploader的简单使用
需要的文件 自备 百度很多
webuploader.js uploader.swf jQuery
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Document</title>
- <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
- <script type="text/javascript" src="webuploader.js"></script>
- <style type="text/css">
- .webuploader-container {
- position: relative;
- }
- .webuploader-element-invisible {
- position: absolute !important;
- clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
- clip: rect(1px,1px,1px,1px);
- }
- .webuploader-pick {
- position: relative;
- display: inline-block;
- cursor: pointer;
- background: #00b7ee;
- padding: 10px 15px;
- color: #fff;
- text-align: center;
- border-radius: 3px;
- overflow: hidden;
- }
- .webuploader-pick-hover {
- background: #00a2d4;
- }
-
- .webuploader-pick-disable {
- opacity: 0.6;
- pointer-events:none;
- }
- </style>
- </head>
- <body>
- <div id="uploader" class="wu-example">
- <!--用来存放文件信息-->
- <div id="thelist" class="uploader-list"></div>
- <div class="btns">
- <div id="picker">选择文件</div>
- <button id="ctlBtn" class="btn btn-default">开始上传</button>
- </div>
- </div>
- <div id="fileList"></div>
- <div id="ss"></div>
- </body>
- </html>
- $(function() {
- var uploader;
- uploader = WebUploader.create({
- resize: false, // 不压缩image
- swf: 'uploader.swf',// swf文件路径
- server: 'upload.php', // 文件接收服务端。
- pick: '#picker',// 选择文件的按钮。可选。内部根据当前运行是创建,可能是input元素,也可能是flash.
- chunked: true,//允许分片上传
- chunkSize:2*1024*1024,//每个分片大小
- auto: true,//是否自动上传
- duplicate:true,//去除重复
- fileNumLimit:20,//上传文件个数限制
- fileSingleSizeLimit:20*1024*1024, //单个文件大小限制 20M
- accept: {
- title: '文字描述',//文字描述
- extensions: 'png,3gp,mp4,rmvb,mov,avi,m4v,wmv',//上传文件后缀
- mimeTypes: 'image/*,video/*,audio/*,application/*'//上传文件类型
- }
- });
- uploader.on('uploadStart', function (file) {
- alert("这是文件上传前的操作函数");
- });
- $("#ctlBtn").click(function () {
- alert("要使用手动上传请设置参数");
- // uploader.upload();//这是将参数配置auto设置 false 手动上传
- });
- uploader.on( 'fileQueued', function( file ) { //文件加入队列后触发
- var $list = $("#fileList"),
- $li = $(
- '<div id="' + file.id + '" class="file-item thumbnail">' + '<img>'+ '<div class="info">' + file.name + '</div>' + '</div>'
- ),
- $img = $li.find('img');
- // $list为容器jQuery实例
- $list.append( $li );
- // 创建缩略图
- uploader.makeThumb( file, function( error, src ) { //src base_64位
- if ( error ) {
- $img.replaceWith('<span>不能预览</span>');
- return;
- }
-
- $img.attr( 'src', src );
- }, 100, 100 ); //100x100为缩略图尺寸
- });
- // 文件上传过程中创建进度实时显示。
- uploader.on( 'uploadProgress', function( file, percentage ) {
- var ss=(percentage*100)+"%";
- $("#ss").text(ss);
- });
-
- // 文件上传成功
- uploader.on( 'uploadSuccess', function( file, res ) {
- alert("这是文件上传成功的操作函数");
- console.log(res.filePaht);//这里可以得到上传后的文件路径
- });
-
- });