分享百度文件上传组件webUploader的使用demo
先创建DOM节点：
<head ng-app="myApp"> <meta charset="UTF-8"> <title></title> <script src="jquery-1.10.1.min.js"></script> <script src="http://cdn.staticfile.org/webuploader/0.1.0/webuploader.js"></script> <!--<script src="file_up.js"></script>--> </head> <body ng-controller="myCtrl"> <p><input type="file" value="上传文件"/></p> </br> <div > <!--用来存放文件信息--> <div ></div> <div class="btns"> <div >选择文件</div> <button >开始上传</button> </div>
<div ></div> </div> </body>
<<span style="color:rgb(255 211 0)">scriptspan>>
//实例化
var <span style="color:rgb(98 189 255)">uploaderspan> = <span style="color:rgb(98 189 255)">Web<span style="color:rgb(98 189 255)">Uploaderspan>span>.create({
// <span style="color:rgb(255 111 119)">swfspan>文件路径
//<span style="color:rgb(255 111 119)">swfspan>: BASE_URL + '/js/<span style="color:rgb(98 189 255)">Uploaderspan>.<span style="color:rgb(255 111 119)">swfspan>',
// <span style="color:rgb(255 111 119)">swfspan>:'<span style="color:rgb(73 238 255)">httpspan>://<span style="color:rgb(255 111 119)">cdnspan>.<span style="color:rgb(98 189 255)">static<span style="color:rgb(73 238 255)">filespan>span>.org/web<span style="color:rgb(98 189 255)">uploaderspan>/0.1.0/<span style="color:rgb(98 189 255)">Uploaderspan>.<span style="color:rgb(255 111 119)">swfspan>',
<span style="color:rgb(73 238 255)">autospan>: false,
// 文件接收服务端。
<span style="color:rgb(255 211 0)">serverspan>:'<span style="color:rgb(73 238 255)">httpspan>://<span style="color:rgb(255 111 119)">127span>.0.0.1:8020/upFile/<span style="color:rgb(253 97 106)"><span style="color:rgb(73 238 255)">filespan>_upspan>.html', <span>//在做这个demo的时候，并没有服务器地址，我使用的是HBuilder自带的浏览器打开文件，复制urlspan>
// 选择文件的按钮。可选。
// 内部根据当前运行是创建，可能是input元素，也可能是<span style="color:rgb(255 95 0)">flashspan>.
<span style="color:rgb(73 238 255)">pickspan>: '#<span style="color:rgb(73 238 255)">pickspan>er',
// 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
<span style="color:rgb(255 211 0)">resizespan>: false,
<span style="color:rgb(255 211 0)">methodspan>:'POST',
});
// 上传队列，仅包括等待上传的文件
var <span style="color:rgb(255 211 0)">_queuespan> = [];
// 存储所有文件
var _map = {};
// 当有文件被添加进队列的时候
<span style="color:rgb(98 189 255)">uploaderspan>.on( '<span style="color:rgb(73 238 255)">filespan>Queued', function( <span style="color:rgb(73 238 255)">filespan> ) {
var that_<span style="color:rgb(73 238 255)">filespan>=<span style="color:rgb(73 238 255)">filespan>;
<span style="color:rgb(255 211 0)">_queuespan>.push(<span style="color:rgb(73 238 255)">filespan>);
draw_page(<span style="color:rgb(255 211 0)">_queuespan>);
});
//绘制页面
function draw_page(<span style="color:rgb(255 211 0)">_queuespan>){
$<span style="color:rgb(73 238 255)"><span style="color:rgb(144 255 173)">lispan>stspan>=$("#my_<span style="color:rgb(73 238 255)"><span style="color:rgb(144 255 173)">lispan>stspan>");
$<span style="color:rgb(73 238 255)"><span style="color:rgb(144 255 173)">lispan>stspan>.html("");
<span style="color:rgb(253 97 106)">consolespan>.log($<span style="color:rgb(73 238 255)"><span style="color:rgb(144 255 173)">lispan>stspan>.html());
for(var i=0;i<<span style="color:rgb(255 211 0)">_queuespan>.length;i++){
$<span style="color:rgb(73 238 255)"><span style="color:rgb(144 255 173)">lispan>stspan>.append( '<<span style="color:rgb(255 111 119)">divspan> >' +
'<<span style="color:rgb(144 255 173)">h4span> class="<span style="color:rgb(73 238 255)">infospan>">' + <span style="color:rgb(255 211 0)">_queuespan>[i].name +
'<span ' + 'onc<span style="color:rgb(144 255 173)">lispan>ck=deleteMy<span style="color:rgb(73 238 255)">filespan>('+<span style="color:rgb(255 211 0)">_queuespan>[i].<span style="color:rgb(144 255 173)">idspan>+')'+ '> 取消上传</span>'
+'</<span style="color:rgb(144 255 173)">h4span>>' +
'</<span style="color:rgb(255 111 119)">divspan>>' );
}
}
//点击开始上传文件
$("#ctlBtn").on("c<span style="color:rgb(144 255 173)">lispan>ck",function(){
<span style="color:rgb(98 189 255)">uploaderspan>.upload();
});
//点击“取消”按钮，调用事件
function deleteMy<span style="color:rgb(73 238 255)">filespan>(myFile_<span style="color:rgb(144 255 173)">idspan>){
<span style="color:rgb(253 97 106)">consolespan>.log(myFile_<span style="color:rgb(144 255 173)">idspan>);
//点击取消，删除dom节点刷新界面
// $(myFile_<span style="color:rgb(144 255 173)">idspan>).remove();
var tar_<span style="color:rgb(144 255 173)">idspan>= $(myFile_<span style="color:rgb(144 255 173)">idspan>).attr("<span style="color:rgb(144 255 173)">idspan>");
$.each(<span style="color:rgb(255 211 0)">_queuespan>,function(k,v){
if(<span style="color:rgb(255 211 0)">_queuespan>[k].<span style="color:rgb(144 255 173)">idspan>==tar_<span style="color:rgb(144 255 173)">idspan>){
var myFile=<span style="color:rgb(255 211 0)">_queuespan>[k];
<span style="color:rgb(98 189 255)">uploaderspan>.removeFile(myFile,true);
}
//return false;
});
}
//文件删除的详细方式
function _delFile (<span style="color:rgb(73 238 255)">filespan>){
for(var i = <span style="color:rgb(255 211 0)">_queuespan>.length - 1 ; i >= 0 ; i-- ){
if(<span style="color:rgb(255 211 0)">_queuespan>[i].<span style="color:rgb(144 255 173)">idspan>== <span style="color:rgb(73 238 255)">filespan>.<span style="color:rgb(144 255 173)">idspan>){
<span style="color:rgb(255 211 0)">_queuespan>.sp<span style="color:rgb(144 255 173)">lispan>ce(i,1);
break;
}
}
//重新绘制界面
draw_page(<span style="color:rgb(255 211 0)">_queuespan>);
};
//档文件被移除队列de时候
<span style="color:rgb(98 189 255)">uploaderspan>.on("<span style="color:rgb(73 238 255)">filespan>Dequeued",function(<span style="color:rgb(73 238 255)">filespan>){
_delFile (<span style="color:rgb(73 238 255)">filespan>);
});
// 文件上传过程中创建进度条实时显示。
<span style="color:rgb(98 189 255)">uploaderspan>.on( 'uploadProgress', function( <span style="color:rgb(73 238 255)">filespan>, <span style="color:rgb(253 97 106)">percentspan>age ) {
alert("uploadProgress--文件正在上传");
var $<span style="color:rgb(144 255 173)">lispan> = $( '#'+<span style="color:rgb(73 238 255)">filespan>.<span style="color:rgb(144 255 173)">idspan> ),
$<span style="color:rgb(253 97 106)">percentspan> = $<span style="color:rgb(144 255 173)">lispan>.find('.progress .<span style="color:rgb(98 189 255)">progress-barspan>');
// 避免重复创建
if ( !$<span style="color:rgb(253 97 106)">percentspan>.length ) {
$<span style="color:rgb(253 97 106)">percentspan> = $('<<span style="color:rgb(255 111 119)">divspan> class="progress progress-striped active">' +
'<<span style="color:rgb(255 111 119)">divspan> class="<span style="color:rgb(98 189 255)">progress-barspan>" role="<span style="color:rgb(98 189 255)">progressbarspan>" style="<span style="color:rgb(255 95 0)">w<span style="color:rgb(144 255 173)">idspan>thspan>: 0%">' +
'</<span style="color:rgb(255 111 119)">divspan>>' +
'</<span style="color:rgb(255 111 119)">divspan>>').appendTo( $<span style="color:rgb(144 255 173)">lispan> ).find('.<span style="color:rgb(98 189 255)">progress-barspan>');
}
$<span style="color:rgb(144 255 173)">lispan>.find('p.state').text('上传中');
$<span style="color:rgb(253 97 106)">percentspan>.css( '<span style="color:rgb(255 95 0)">w<span style="color:rgb(144 255 173)">idspan>thspan>', <span style="color:rgb(253 97 106)">percentspan>age * 100 + '%' );
});
//开始上传
<span style="color:rgb(98 189 255)">uploaderspan>.on('startUpload',function(<span style="color:rgb(73 238 255)">filespan>){
alert("文件开始上传了------startUpload");
});
<span style="color:rgb(98 189 255)">uploaderspan>.on( 'uploadSuccess', function( <span style="color:rgb(73 238 255)">filespan> ) {
$( '#'+<span style="color:rgb(73 238 255)">filespan>.<span style="color:rgb(144 255 173)">idspan> ).find('p.state').text('已上传');
});
<span style="color:rgb(98 189 255)">uploaderspan>.on( 'uploadError', function( <span style="color:rgb(73 238 255)">filespan> ) {
$( '#'+<span style="color:rgb(73 238 255)">filespan>.<span style="color:rgb(144 255 173)">idspan> ).find('p.state').text('上传出错');
});
<span style="color:rgb(98 189 255)">uploaderspan>.on( 'uploadComplete', function( <span style="color:rgb(73 238 255)">filespan> ) {
$( '#'+<span style="color:rgb(73 238 255)">filespan>.<span style="color:rgb(144 255 173)">idspan> ).find('.progress').fadeOut();
});
</<span style="color:rgb(255 211 0)">scriptspan>>
参考文章：http://blog.ncmem.com/wordpress/2023/09/14/%e5%88%86%e4%ba%ab%e7%99%be%e5%ba%a6%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e7%bb%84%e4%bb%b6webuploader%e7%9a%84%e4%bd%bf%e7%94%a8demo/
欢迎入群一起讨论
