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);//这里可以得到上传后的文件路径
-
});
-
});