序言
在最近的AngularJS的项目中有需要使用上传插件的需求，所以这里将使用说明贴出来。
步骤
1、官网地址：http://fex.baidu.com/webuploader/
2、其他Angular上传插件angular-file-upload 网址：https://www.npmjs.com/package/angular-file-upload
2、代码
选择文件之后自动上传：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Document</title> ???<!--引入CSS--> ???<link rel="stylesheet" type="text/css" href="webuploader/webuploader.css"> ???<script ???src="http://code.jquery.com/jquery-3.2.1.js" ???integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" ???crossorigin="anonymous"></script> ???<!--引入JS--> ???<script type="text/javascript" src="webuploader/webuploader.js"></script></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> ???<script> ???????var uploader = WebUploader.create({
auto:true, ???????????// swf文件路径 ???????????swf:‘/js/Uploader.swf‘, ???????????// 文件接收服务端。 ???????????server: ‘http://webuploader.duapp.com/server/fileupload.php‘, ???????????// 选择文件的按钮。可选。 ???????????// 内部根据当前运行是创建，可能是input元素，也可能是flash. ???????????pick: ‘#picker‘, ???????????// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！ ???????????resize: false ???????}); ???????uploader.on( ‘fileQueued‘, function( file ) { ???????let $list=$("#thelist"); ???????????$list.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(); ???????}); ???</script></body></html>点击按钮之后才会上传
<!DOCTYPE html><html lang="en"> ???<head> ???????<meta charset="UTF-8"> ???????<title>Document</title> ???????<!--引入CSS--> ???????<link rel="stylesheet" type="text/css" href="webuploader/webuploader.css"> ???????<script src="http://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> ???????<!--引入JS--> ???????<script type="text/javascript" src="webuploader/webuploader.js"></script> ???</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> ???????<script> ???????????var selectFile = false; ???????????var uploader = WebUploader.create({
//headers中传cookie ???????????????//headers: { ???????????????// ???‘access-token‘: currentCookieCheck ???????????????//},
//传递数据的 ???????????????//formData: { ???????????????// ???"provinceIds":$("#selectedProvince").val(), ???????????????// ???"shippingMethod":$("#shippingMethod").val() ???????????????//}, ???????????????// swf文件路径 ??????????????? swf: ‘/js/Uploader.swf‘, ???????????????// 文件接收服务端。 ?????????????? server: ‘/api/express/uploadPrice‘, ???????????????// 选择文件的按钮。可选。 ???????????????// 内部根据当前运行是创建，可能是input元素，也可能是flash. ??????????????? pick: ‘#picker‘, ???????????????// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！ ?????????????? resize: false ??????????? }); ???????????uploader.on(‘fileQueued‘, function(file) { ???????????????selectFile = true; ???????????????let $list = $("#thelist"); ???????????????$list.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(); ???????????}); ???????????$("#ctlBtn").click(function() { ???????????????if (selectFile) { ???????????????????uploader.upload(); ???????????????} ???????????}) ???????</script> ???</body></html>webuploader使用说明
原文地址：http://www.cnblogs.com/leijing0607/p/8058125.html