大文件webuploader的基本使用

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

大文件webuploader的基本使用

猜你喜欢