標籤：class role github 取消 cti end str func tle
先建立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 // 選擇檔案的按鈕。可選。 // 內部根據當前運行是建立，可能是input元素，也可能是flash. pick: ‘#picker‘, // 不壓縮image, 預設如果是jpeg，檔案上傳前會壓縮一把再上傳！ resize: false, method:‘POST‘, }); // 上傳隊列，僅包括等待上傳的檔案 var _queue = [];// 儲存所有檔案 var _map = {};
// 當有檔案被添加進隊列的時候 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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
