原本想把这几种方法放在统一篇写的，写完xhr，已很长了，想一想照样离开的比较好。
webuploader是由Baidu WebFE(FEX)团队开辟的一个简朴的以HTML5为主,FLASH为辅的当代文件上传组件。它的兼容性很好，兼容IE6+，IOS6+，Android4+。由于做的体系都要兼容IE8，在用webuploader之前，换过了好几个组件，都没法满足需求，比方uploadify没法在header内里增加token（需求着实很简朴，不能随意拿个组件来用，我嘛很无望）话说，着实一开始就有试着用webuploader，然则由于某网站上的demo内里的js文件有题目，会报错（当时项目赶啊，焦急啊，就摒弃了，背面问了一下狮虎，狮虎也是用webuploader，我就跑官网去下载，就能够了！）果真照样官网靠谱！趁便提一下，用webuploader这个项目，文件上传是上传到本身的服务器，不是上传七牛。
先上代码，这个代码是用在项目内里之前，写的一个小demo，参数不完全。。。（webuploader运用起来很简朴，api也很细致，去官网看一下就能够上手了）
<html style="padding-bottom: 54px;">
<head>
<meta charset="UTF-8">
<title>Upload</title>
<link href="css/webuploader.css" rel="stylesheet">
</head>
<body>
<div id="uploader" class="wu-example">
<!--用来寄存文件信息-->
<div id="thelist" class="uploader-list"></div>
<div class="btns">
<div id="picker">挑选文件</div>
</div>
</div>
<script src="//cdn.bootcss.com/jquery/1.12.2/jquery.min.js"></script>
<script src="js/webuploader.js"></script>
<script src="js/test.js"></script>
</body>
</html>(function () {
var uploader = WebUploader.create({
// swf文件途径
swf: 'js/Uploader.swf',
// 文件吸收服务端。
server: 'uploadify.php', // 由于是demo，就拿着uploadify的php来用一下
// 挑选文件的按钮。可选。
// 内部依据当前运转是建立，多是input元素，也多是flash.
pick: '#picker',
// 不紧缩image, 默许假如是jpeg，文件上传前会紧缩一把再上传！
resize: false,
auto: true,
headers: {'userName': 'emi', 'token': '123456'}
});
// 当有文件被增加进行列的时刻，增加到页面预览
uploader.on( 'fileQueued', function( file ) {
$('#thelist').append( '<div id="' + file.id + '" class="item">' +
'<h4 class="info">' + file.name + '</h4>' +
'<p class="state">守候上传...</p>' +
'</div>' );
});
// 文件上传过程当中建立进度条及时显现。
uploader.on( 'uploadProgress', function( file, percentage ) {
var $li = $( '#'+file.id ),
$percent = $li.find('.progress .progress-bar');
// 防止反复建立
if ( !$percent.length ) {
$percent = $('<div class="progress progress-striped active">' +
'<div class="progress-bar" role="progressbar" style="width: 0%">' +
'</div>' +
'</div>').appendTo( $li ).find('.progress-bar');
}
$li.find('p.state').text('上传中');
$percent.css( 'width', percentage * 100 + '%' );
});
uploader.on( 'uploadSuccess', function( file ) {
$( '#'+file.id ).find('p.state').text('已上传');
});
uploader.on( 'uploadError', function( file ) {
$( '#'+file.id ).find('p.state').text('上传失足');
});
uploader.on( 'uploadComplete', function( file ) {
$( '#'+file.id ).find('.progress').fadeOut();
});
})();项目过程当中，我也碰到了一个很广泛的题目（虽然上面代码内里没有这个参数，这个参数是指定接收哪些范例的文件），就是文件夹翻开迥殊慢，网上找了一下
accept: {
title: 'Images',
extensions: 'jpg,jpeg,png',
mimeTypes: 'image/*'
}改成如许就能够了，亲测有用~
accept: {
title: 'Images',
extensions: 'jpg,jpeg,png',
mimeTypes: 'image/jpg,image/jpeg,image/png' //修正位置
}能够经由过程upload对象改参数值，比方uploader.options.server = ‘服务器途径’。也能够重写上传事宜。
假如不自动上传的话，能够经由过程upoloader.upload()触发。
觉得webuploader至心用得顺风顺水，没碰到什么题目。着实憋不出什么来。
