分享百度文件上傳組件webUploader的使用demo
阿新 • • 發佈：2017-06-13
ron start resize mov method end creat html stripe
先創建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 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 id="my_list"></div> </div> </body>
<script>
//實例化
var uploader = WebUploader.create({
// swf文件路徑
//swf: BASE_URL + ‘/js/Uploader.swf‘,
// swf:‘http://cdn.staticfile.org/webuploader/0.1.0/Uploader.swf‘,
auto: false,
// 文件接收服務端。
server:‘http://127.0.0.1:8020/upFile/file_up.html‘, //在做這個demo的時候，並沒有服務器地址，我使用的是HBuilder自帶的瀏覽器打開文件，復制url
// 當有文件被添加進隊列的時候
uploader.on( ‘fileQueued‘, function( file ) {
var that_file=file;
_queue.push(file);
draw_page(_queue);
});
//繪制頁面
function draw_page(_queue){
$list=$("#my_list");
$list.html("");
console.log($list.html());
for(var i=0;i<_queue.length;i++){
$list.append( ‘<div id="‘ + _queue[i].id + ‘" class="item">‘ +
‘<h4 class="info">‘ + _queue[i].name +
‘<span id="cancelButton" style="background: red;cursor:pointer"‘ + ‘onclick=deleteMyfile(‘+_queue[i].id+‘)‘+ ‘> 取消上傳</span>‘
+‘</h4>‘ +
‘</div>‘ );
}
}
//點擊開始上傳文件
$("#ctlBtn").on("click",function(){
uploader.upload();
});
//點擊“取消”按鈕，調用事件
function deleteMyfile(myFile_id){
console.log(myFile_id);
//點擊取消，刪除dom節點刷新界面
// $(myFile_id).remove();
var tar_id= $(myFile_id).attr("id");
$.each(_queue,function(k,v){
if(_queue[k].id==tar_id){
var myFile=_queue[k];
uploader.removeFile(myFile,true);
}
return false;
});
}
//文件刪除的詳細方式
function _delFile (file){
for(var i = _queue.length - 1 ; i >= 0 ; i-- ){
if(_queue[i].id== file.id){
_queue.splice(i,1);
break;
}
}
//重新繪制界面
draw_page(_queue);
};
//檔文件被移除隊列de時候
uploader.on("fileDequeued",function(file){
_delFile (file);
});
// 文件上傳過程中創建進度條實時顯示。
uploader.on( ‘uploadProgress‘, function( file, percentage ) {
alert("uploadProgress--文件正在上傳");
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(‘startUpload‘,function(file){
alert("文件開始上傳了------startUpload");
});
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>
參考地址：
http://www.jb51.net/article/96735.htm
http://www.jb51.net/article/96714.htm
http://blog.csdn.net/mooner_guo/article/details/48765151
你也可以看看webuploader官網github
分享百度文件上傳組件webUploader的使用demo