先创建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的更多相关文章

  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. activiti 动态自定义流程（包含会签流程）

    后台加入工作流步骤(这个不重要,自己实现) package com.blk.integrated.pojo; import java.io.Serializable; import java.util ...

  2. DataTable RowFilter 过滤数据

    用Rowfilter加入过滤条件 eg: string sql = "select Name,Age,Sex from UserInfo"; DataTable dt = Data ...

  3. vue的v-model绑定数据问题

    在我的项目中有一个这样的功能模块: 我们修改数据全是在前台的table中修改,然后把这个table的值带到后台.(理想:修改值后,点击确认值改变,点击取消值恢复原来的值)那么问题就来了: a)你修改值 ...

  4. C++内存分配与对象构造的分离

    在C++中,我们基本用new(delete)操作符分配(释放)内存.new操作符为特定类型分配内存,并在新分配的内存中构造该类型的一个对象.new表达式自动运行合适的构造函数来初始化每个动态分配的类类 ...

  5. Spring整合CXF发布及调用WebService

    这几天终于把webService搞定,下面给大家分享一下发布webService和调用webService的方法 添加jar包 (官方下载地址:http://cxf.apache.org/downlo ...

  6. 剑指offer--50.滑动窗口的最大值

    时间限制:1秒 空间限制:32768K 热度指数:157641 题目描述 给定一个数组和滑动窗口的大小,找出所有滑动窗口里数值的最大值.例如,如果输入数组{2,3,4,2,6,2,5,1}及滑动窗口的 ...

  7. 如何在 js 代码中使用 jsp 标签或 Java 代码

    JSP 标签还是很方便的,比如 Struts.Spring 等提供给我们的 JSP 标签,可以用它们来获取变量或进行一些计算.比如 struts2 的 <s:url value="/a ...

  8. java IO 学习（一）

    io的类有好多个,总结一下,给他们列出来,下一行缩进为子类: File 文件或目录类 InputStream 字节输入流 FileInputStream 用于读取文件的原始字节流,变成字节输入流 By ...

  9. iOS的坑:ERRORITMS-90096: "Your binary is not optimized for iPhone 5 - New iPhone appsand app updatesXcode7提交到App Store二进制文件时报错错误：“你itms-90096二进制不是iPhone 5的新iPhone应用程序和应用程序的更新必须提交支持iPhone 5英寸的显示器........

    在工程里的Images.xcassets添加并设置LaunchImage对解决ERROR ITMS-90096根本不会起到任何作用,需要单独添加针对iPhone 5的载入图片.关键点有三项: 1.图片 ...

  10. Android编程 高德地图 中如何重写 定位按键 的触发事件 （com.amap.api.maps2d.LocationSource）点击定位后不仅定位在地图中心点上而且可以设置地图的缩放大小和提示

    在利用高德地图来编写自己的APP的时候,发现了一种对定位按键的重写方法,那就是利用   com.amap.api.maps2d.LocationSource  接口来重写. 什么是定位按键呢,下图中右 ...