首页 > 代码库 > 分享百度文件上传组件webUploader的使用demo

分享百度文件上传组件webUploader的使用demo

2024-10-05 11:41:02   214人阅读

先创建DOM节点：
<head ng-app="myApp">
   <meta charset="UTF-8">
   <title></title>
   <script src="http://www.mamicode.com/jquery-1.10.1.min.js"></script>
   <script src="http://cdn.staticfile.org/webuploader/0.1.0/webuploader.js"></script>
   <!--<script src="http://www.mamicode.com/file_up.js"></script>-->
</head>
<body ng-controller="myCtrl">
　　<p><input type="file" value="http://www.mamicode.com/上传文件"/></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


联系
我们