-
webUploader的使用记录
-
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览器,沿用原来的FLASH运行时,兼容IE6+,iOS 6+, android 4+。两套运行时,同样的调用方式,可供用户任意选用。
采用大文件分片并发上传,极大的提高了文件上传效率。 -
引入资源,使用Web Uploader文件上传需要引入三种资源:JS, CSS, SWF
<!--引入CSS--> <link rel="stylesheet" type="text/css" href="webuploader文件夹/webuploader.css"> <!--引入JS--> <script type="text/javascript" src="webuploader文件夹/webuploader.js"></script>
- html部分
<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>
-
添加上传文件框(次方法会在下面附的真实例子上用到)
uploader.addButton({
id: '#filePicker_2',
innerHTML: '<i></i>选择文件'
});
//如果多个文件可以写成这样,循环增加,像下面图片
var len=19;
for (var i = 0; i < len; i++) {
uploader.addButton({
id: "#filePicker_" + i + "",
innerHTML: '<i></i>选择文件'
});
}
- 初始化Web Uploader
var uploader = WebUploader.create({
auto: true,// 选完文件后,是否自动上传。
swf: './js/webuploader-0.1.5/Uploader.swf',// swf文件路径
server: 'http://receive.com/v1/book/upload',// 文件接收服务端。
dnd: '.upload-container',
pick: '#picker',// 内部根据当前运行是创建,可能是input元素,也可能是flash. 这里是div的id
multiple: true, // 选择多个
chunked: true,// 开起分片上传。
threads: 5, // 上传并发数。允许同时最大上传进程数。
method: 'POST', // 文件上传方式,POST或者GET。
fileSizeLimit: 1024*1024*100*10, //验证文件总大小是否超出限制, 超出则不允许加入队列。
fileSingleSizeLimit: 1024*1024*100, //验证单个文件大小是否超出限制, 超出则不允许加入队列。
compress:false, //我在使用的过程中无此属性,会导致上传jpg时拿不到自定义属性。
fileVal:'epub', // [默认值:'file'] 设置文件上传域的name。
// 允许接受的文件。
accept: {
title: 'file',
extensions: 'excel,doc,docx,xls,pdf,png,jpg',
}
});
//属性含义详见官方文档
// http://fex.baidu.com/webuploader/doc/index.html
- 添加文件到队列时
uploader.on( 'fileQueued', function( file ) {
// 选中文件时要做的事情,比如在页面中显示选中的文件并添加到文件列表,获取文件的大小,文件类型等
console.log(file.ext) // 获取文件的后缀
console.log(file.size) // 获取文件的大小
console.log(file);
});
- 文件上传过程中创建进度条实时显示。
uploader.on( 'uploadProgress', function( file, percentage ) {
console.log(percentage * 100 + '%');
});
- 上传成功时触发的
uploader.on( 'uploadSuccess', function( file,response ) {
console.log(file.id+"传输成功");
});
- 上传失败时触发的
uploader.on( 'uploadError', function( file ) {
console.log(file);
console.log(file.id+'upload error')
});
- 重试上传,重试指定文件,或者从出错的文件开始重新上传。
$('.upload-list').on('click', '.upload-item__progress span', function(){
uploader.retry($(this).data('file'));
});
- 上传完成
uploader.on( 'uploadComplete', function( file ) {
console.log(uploader.getFiles());
});
- 一个简陋的demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webuploader</title>
</head>
<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/webuploader/0.1.1/webuploader.css">
<style>
#upload-container, #upload-list{width: 500px; margin: 0 auto; }
#upload-container{cursor: pointer; border-radius: 15px; background: #EEEFFF; height: 200px;}
#upload-list{height: 800px; border: 1px solid #EEE; border-radius: 5px; margin-top: 10px; padding: 10px 20px;}
#upload-container>span{widows: 100%; text-align: center; color: gray; display: block; padding-top: 15%;}
.upload-item{margin-top: 5px; padding-bottom: 5px; border-bottom: 1px dashed gray;}
.percentage{height: 5px; background: green;}
.btn-delete, .btn-retry{cursor: pointer; color: gray;}
.btn-delete:hover{color: orange;}
.btn-retry:hover{color: green;}
</style>
<!--引入JS-->
<body>
<div id="upload-container">
<span>点击或将文件拖拽至此上传</span>
</div>
<div id="upload-list">
<!-- <div class="upload-item">
<span>文件名:123</span>
<span data-file_id="" class="btn-delete">删除</span>
<span data-file_id="" class="btn-retry">重试</span>
<div class="percentage"></div>
</div> -->
</div>
<button id="picker" style="display: none;">点击上传文件</button>
</body>
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
<script src="https://cdn.bootcss.com/webuploader/0.1.1/webuploader.js"></script>
<script>
$('#upload-container').click(function(event) {
$("#picker").find('input').click();
});
var uploader = WebUploader.create({
auto: true,// 选完文件后,是否自动上传。
swf: 'https://cdn.bootcss.com/webuploader/0.1.1/Uploader.swf',// swf文件路径
server: 'http://www.test.com/zyb.php',// 文件接收服务端。
dnd: '#upload-container',
pick: '#picker',// 内部根据当前运行是创建,可能是input元素,也可能是flash. 这里是div的id
multiple: true, // 选择多个
chunked: true,// 开起分片上传。
threads: 5, // 上传并发数。允许同时最大上传进程数。
method: 'POST', // 文件上传方式,POST或者GET。
fileSizeLimit: 1024*1024*100*100, //验证文件总大小是否超出限制, 超出则不允许加入队列。
fileSingleSizeLimit: 1024*1024*100, //验证单个文件大小是否超出限制, 超出则不允许加入队列。
fileVal:'upload', // [默认值:'file'] 设置文件上传域的name。
});
uploader.on('fileQueued', function(file) {
// 选中文件时要做的事情,比如在页面中显示选中的文件并添加到文件列表,获取文件的大小,文件类型等
console.log(file.ext) // 获取文件的后缀
console.log(file.size) // 获取文件的大小
console.log(file.name);
var html = '<div class="upload-item"><span>文件名:'+file.name+'</span><span data-file_id="'+file.id+'" class="btn-delete">删除</span><span data-file_id="'+file.id+'" class="btn-retry">重试</span><div class="percentage '+file.id+'" style="width: 0%;"></div></div>';
$('#upload-list').append(html);
});
uploader.on('uploadProgress', function(file, percentage) {
console.log(percentage * 100 + '%');
var width = $('.upload-item').width();
$('.'+file.id).width(width*percentage);
});
uploader.on('uploadSuccess', function(file, response) {
console.log(file.id+"传输成功");
});
uploader.on('uploadError', function(file) {
console.log(file);
console.log(file.id+'upload error')
});
$('#upload-list').on('click', '.upload-item .btn-delete', function() {
// 从文件队列中删除某个文件id
file_id = $(this).data('file_id');
// uploader.removeFile(file_id); // 标记文件状态为已取消
uploader.removeFile(file_id, true); // 从queue中删除
console.log(uploader.getFiles());
});
$('#upload-list').on('click', '.btn-retry', function() {
uploader.retry($(this).data('file_id'));
});
uploader.on('uploadComplete', function(file) {
console.log(uploader.getFiles());
});
</script>
</html>
附:真实例子
<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title></title>
<meta name="decorator" content="default"/>
<script type="text/javascript" src="${ctxStatic}/common/js/charCount.js"></script>
<script type="text/javascript">
var validateForm;
function doSubmit(){//回调函数,在编辑和保存动作时,供openDialog调用提交表单。
if(validateForm.form()){
$("#inputForm").submit();
return true;
}
return false;
}
var imgs=[];
$(document).ready(function() {
$("#legalTjdw").select2();
$(".removeFile").each(function(){
imgs.push({"url":$(this).attr("url"),"id":$(this).attr("ids")});
});
validateForm = $("#inputForm").validate({
rules: {
'sbfs':{required:true},
'subjectType':{required:true,maxlength:32},
'creditCode':{
required:true,
maxlength:18,
remote:{
url:"${ctx}/creadittypical/creditTypicalLegal/checkTypicalLcreditCode",
type: "post",
data:{
creditCode:function(){
return $("