1. 先创建DOM节点：
    <head ng-app="myApp">
  2.    <meta charset="UTF-8">
  3.    <title></title>
  4.    <script src="jquery-1.10.1.min.js"></script>
  5.    <script src="http://cdn.staticfile.org/webuploader/0.1.0/webuploader.js"></script>
  6.    <!--<script src="file_up.js"></script>-->
  7. </head>
  8. <body ng-controller="myCtrl">
  9. 　　<p><input type="file" value="上传文件"/></p>
  10. 　　</br>
  11. 　　<div id="uploader" class="wu-example">
  12. 　  　<!--用来存放文件信息-->
  13.      <div id="thelist" class="uploader-list"></div>
  14.      <div class="btns">
  15. 	<div id="picker">选择文件</div>
  16. 	<button id="ctlBtn" class="btn btn-default">开始上传</button>
  17.      </div>
         <div id="my_list"></div>
  18.    </div>
  19. </body>

　　

  1. <script>
  2. 	//实例化
  3. 	var uploader = WebUploader.create({
  4. 	         // swf文件路径
  5. 	   	//swf: BASE_URL + '/js/Uploader.swf',
  6. 	  	// swf:'http://cdn.staticfile.org/webuploader/0.1.0/Uploader.swf',
  7. 	    auto: false,
  8. 	    // 文件接收服务端。
  9. 	    server:'http://127.0.0.1:8020/upFile/file_up.html',	//在做这个demo的时候，并没有服务器地址，我使用的是HBuilder自带的浏览器打开文件，复制url
  10. 	    // 选择文件的按钮。可选。
  11. 	    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
  12. 	    pick: '#picker',
  13. 	    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
  14. 	    resize: false,
  15.             method:'POST',
  16. 	});
  17.  
  18. // 上传队列，仅包括等待上传的文件
  19.      var _queue = [];
  20.  
  21. // 存储所有文件
  22.      var _map = {};
  23. // 当有文件被添加进队列的时候
  24.     uploader.on( 'fileQueued', function( file ) {
  25. 	var that_file=file;
  26. 	_queue.push(file);
  27. 	draw_page(_queue);
  28.     });
  29.  
  30.    //绘制页面
  31.     function draw_page(_queue){
  32.     	$list=$("#my_list");
  33.     	$list.html("");
  34.     	console.log($list.html());
  35. 		for(var i=0;i<_queue.length;i++){
  36. 			  $list.append( '<div id="' + _queue[i].id + '" class="item">' +
  37. 	        '<h4 class="info">' + _queue[i].name +
  38. 	          '<span id="cancelButton" style="background: red;cursor:pointer"' + 'onclick=deleteMyfile('+_queue[i].id+')'+ '> 取消上传</span>'
  39. 	        +'</h4>' +
  40. 	    	'</div>' );
  41. 		}
  42.     }
  43.  
  44.     //点击开始上传文件
  45.         $("#ctlBtn").on("click",function(){
  46. 	   uploader.upload();
  47. 	});
  48.  
  49.     //点击“取消”按钮，调用事件
  50. 	function deleteMyfile(myFile_id){
  51. 		   console.log(myFile_id);
  52. 		  //点击取消，删除dom节点刷新界面
  53. 	 	 //   $(myFile_id).remove();
  54.  
  55. 	 	   var tar_id= $(myFile_id).attr("id");
  56. 	 	   $.each(_queue,function(k,v){
  57. 	 	    	if(_queue[k].id==tar_id){
  58. 	 	    		var myFile=_queue[k];
  59. 	 	    		uploader.removeFile(myFile,true);
  60. 	 	    	}
  61. 	 	    	//return false;
  62. 	 	   });
  63. 	}
  64. 	//文件删除的详细方式
  65. 	function _delFile (file){
  66. 	    for(var i = _queue.length - 1 ; i >= 0 ; i-- ){
  67. 	        if(_queue[i].id== file.id){
  68. 	             _queue.splice(i,1);
  69. 	            break;
  70. 	        }
  71. 	    }
  72. 	   //重新绘制界面
  73. 		draw_page(_queue);
  74. 	};
  75.  
  76. 	//档文件被移除队列de时候
  77. 	uploader.on("fileDequeued",function(file){
  78. 		_delFile (file);
  79. 	});
  80.  
  81. 	// 文件上传过程中创建进度条实时显示。
  82. 	uploader.on( 'uploadProgress', function( file, percentage ) {
  83. 		alert("uploadProgress--文件正在上传");
  84. 	    var $li = $( '#'+file.id ),
  85. 	        $percent = $li.find('.progress .progress-bar');
  86.  
  87. 	    // 避免重复创建
  88. 	    if ( !$percent.length ) {
  89. 	        $percent = $('<div class="progress progress-striped active">' +
  90. 	          '<div class="progress-bar" role="progressbar" style="width: 0%">' +
  91. 	          '</div>' +
  92. 	        '</div>').appendTo( $li ).find('.progress-bar');
  93. 	    }
  94.  
  95. 	    $li.find('p.state').text('上传中');
  96. 	    $percent.css( 'width', percentage * 100 + '%' );
  97. 	});
  98.  
  99. 	//开始上传
  100. 	uploader.on('startUpload',function(file){
  101. 		  alert("文件开始上传了------startUpload");
  102. 	});
  103.  
  104. 	uploader.on( 'uploadSuccess', function( file ) {
  105.     	$( '#'+file.id ).find('p.state').text('已上传');
  106. 	});
  107.  
  108. 	uploader.on( 'uploadError', function( file ) {
  109. 	    $( '#'+file.id ).find('p.state').text('上传出错');
  110. 	});
  111.  
  112. 	uploader.on( 'uploadComplete', function( file ) {
  113. 	    $( '#'+file.id ).find('.progress').fadeOut();
  114. 	});
  115. </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的更多相关文章

  1. 百度开源上传组件webuploader 可上传多文件并带有进度条

    //上传多文件 function UploadMultiFile() { var uploader = WebUploader.create({ // 选完文件后,是否自动上传. auto: true ...

  2. 百度开源上传组件WebUploader的formData动态传值技巧

    基于Web页面的文件上传一直是互联网应用开发中避免不了的,从asp时代的AspUpload组件.到asp无组件上传,到.Net时代的FileUpload,再到HTML5时代的各种基于jQuery的上传 ...

  3. PHP 多图上传，图片批量上传插件，webuploader.js，百度文件上传插件

    PHP  多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...

  4. Baidu WebUploader 前端文件上传组件的使用

    简介 WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流I ...

  5. 百度上传组件 WebUploader

    WebUploader http://fex.baidu.com/webuploader/doc/index.html WebUploader API 文档详细解读 源码以及示例:https://gi ...

  6. Atitit..文件上传组件选型and最佳实践总结(3)----断点续传控件的实现

    Atitit..文件上传组件选型and最佳实践总结(3)----断点续传控件的实现 1. 实现思路:::元插件,元设置... 1 2. 实现流程downzip,unzip,exec 1 3. Zip  ...

  7. Atitit..文件上传组件选型and最佳实践总结(2)----断点续传

    Atitit..文件上传组件选型and最佳实践总结(2)----断点续传 1. 断点续传的原理 1 2. 如何判断一个插件/控件是否支持断点续传?? 1 3. 常用的组件选型结果::马 1 4. 自定 ...

  8. 异步文件上传组件 Uploader

    Uploader是非常强大的异步文件上传组件,支持ajax.iframe.flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证.图片预览.进度条等,广泛应用于淘 ...

  9. 多文件上传组件FineUploader使用心得

    原文 多文件上传组件FineUploader使用心得 做Web开发的童鞋都知道,需要经常从客户端上传文件到服务端,当然,你可以使用<input type="file"/> ...

随机推荐

  1. HDU 2795 线段树单点更新

    Billboard Time Limit: 20000/8000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  2. Struts2中的包的作用描述

    asm-3.3.jar作用:操作java字节码的类库包路径及主要类:未提供 asm-commons-3.3.jar作用:提供了基于事件的表现形式包路径及主要类:未提供 asm-tree-3.3.jar ...

  3. CGLIB介绍与原理

    转载: http://blog.csdn.net/zghwaicsdn/article/details/50957474 CGLIB介绍与原理(部分节选自网络) 一.什么是CGLIB? CGLIB是一 ...

  4. List根据某个字段（属性）去重

    有时候自带的list.Distinct()去重并不能满足魔门的要求,比如以下情况 如果testList的Name相同则视为重复,则可以如下实现,比写循环语句简洁多了 testList.Where((x ...

  5. 【zznu-2093】毁掉这颗二叉树

    题目描述 广寒宫下有株二叉树,树上共有n个节点,通过n-1条树枝连接,树下有一只玉兔,吴刚提着斧子站在一旁. 他恼恨一切同他争夺嫦娥的事物,所以他决定通过砍二叉树上的n-1条树枝来毁掉这颗二叉树. 妙 ...

  6. 二十三、DBMS_METADATA(提供提取数据库对象的完整定义的接口)

    1.概述 作用:提供提取数据库对象的完整定义的接口.这些定义可以用XML或SQL DDL格式描述.提供两种类型接口:可编程控制的接口:用于Ad Hoc查询的简单接口. 2.包的组成 dbms_meta ...

  7. 十、dbms_shared_pool（提供了对共享池的一些过程和函数访问）

    1.概述 作用:提供了对共享池的一些过程和函数访问,它使用户可以显示共享池中的对象尺寸,绑定对象到共享池,清除绑定到共享池的对象.为了使用该包,必须运行dbmspool.sql脚本来建立该包. 2.包 ...

  8. visual studio 调试时提示 已加载“C:\Windows\SysWOW64\ntdll.dll”。无法查找或打开 PDB 文件。

    问题描述 “Win32Project3.exe”(Win32): 已加载“D:\software\VS2013\VS2013 文档\Win32Project3\Debug\Win32Project3. ...

  9. ElasticSearchRepository和ElasticSearchTemplate的使用

    Spring-data-elasticsearch是Spring提供的操作ElasticSearch的数据层,封装了大量的基础操作,通过它可以很方便的操作ElasticSearch的数据. 版本说明 ...

  10. HDU 1806

    http://acm.hdu.edu.cn/showproblem.php?pid=1806 非常玄妙的rmq问题,这个st算法有点神 #include <iostream> #inclu ...