分享百度文件上传组件webUploader的使用demo
先创建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的更多相关文章
- 百度开源上传组件webuploader 可上传多文件并带有进度条
//上传多文件 function UploadMultiFile() { var uploader = WebUploader.create({ // 选完文件后,是否自动上传. auto: true ...
- 百度开源上传组件WebUploader的formData动态传值技巧
基于Web页面的文件上传一直是互联网应用开发中避免不了的,从asp时代的AspUpload组件.到asp无组件上传,到.Net时代的FileUpload,再到HTML5时代的各种基于jQuery的上传 ...
- PHP 多图上传，图片批量上传插件，webuploader.js，百度文件上传插件
PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...
- Baidu WebUploader 前端文件上传组件的使用
简介 WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流I ...
- 百度上传组件 WebUploader
WebUploader http://fex.baidu.com/webuploader/doc/index.html WebUploader API 文档详细解读 源码以及示例:https://gi ...
- Atitit..文件上传组件选型and最佳实践总结(3)----断点续传控件的实现
Atitit..文件上传组件选型and最佳实践总结(3)----断点续传控件的实现 1. 实现思路:::元插件,元设置... 1 2. 实现流程downzip,unzip,exec 1 3. Zip ...
- Atitit..文件上传组件选型and最佳实践总结(2)----断点续传
Atitit..文件上传组件选型and最佳实践总结(2)----断点续传 1. 断点续传的原理 1 2. 如何判断一个插件/控件是否支持断点续传?? 1 3. 常用的组件选型结果::马 1 4. 自定 ...
- 异步文件上传组件 Uploader
Uploader是非常强大的异步文件上传组件,支持ajax.iframe.flash三套方案,实现浏览器的全兼容,调用非常简单,内置多套主题支持 和常用插件,比如验证.图片预览.进度条等,广泛应用于淘 ...
- 多文件上传组件FineUploader使用心得
原文 多文件上传组件FineUploader使用心得 做Web开发的童鞋都知道,需要经常从客户端上传文件到服务端,当然,你可以使用<input type="file"/> ...
随机推荐
- Opencv+pycharm+anaconda配置
最简便的方法,没有之一 首先下载annconda:(不要从官网下,还要FQ,还要慢) https://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/ 请注 ...
- day28 CRM万能权限组件开发 && 主机管理-堡垒机
1,CRM项目实战-万能权限组件开发参考博客:http://www.cnblogs.com/alex3714/articles/6661911.html 参考代码:https://github.com ...
- MYSQL中的日期转换
MYSQL中的日期转换 网址: http://www.eygle.com/digest/2006/09/mysql_date_convert.html 对于每个类型拥有的值范围以及并且指定日期何时间值 ...
- BGP&RIP
策略路由是2000之前 如果不通检查是否有相互影响的策略 BGP 25端 查看 25是上端起lan 地址是172.100.1.254 互联158是下端起wan 172.100.1.158 25的内 ...
- 上下行分流下行负载方式和能ping通但不能打开
1 下行线路负载方式选择 目的端口+协议 否则有可能出现微信443端口图片打不开的情况. 2.彭ping通但是打不开的情况下将上行线路mtu值改小 由1500改为1450
- C# 设计模式巩固笔记 - 建造者模式
前言 写给自己-贵在坚持.建造者模式不复杂,但是想个形象的例子好难. 介绍-建造者模式 定义:将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. 实现 建造者模式主要是应对复杂 ...
- wxpython的简单的应用
import wximport wx.xrc import pandas as pd from conf.env import * # 允许选择的文件wildcard = "Python s ...
- vue开发环境搭建Mac版
一.前言 要做一个移动端app,面对webapp最流行的三个技术React,angular,vue,三选一,如何选,可参考blog移动app技术选型,react,angular, vue, 下面是对 ...
- resizable可调整尺寸组件
Resizable 可调整尺寸不依赖于其他组件 1.用法:通过标记创建可调整尺寸(resizable)对象 <div class="easyui-resizable" sty ...
- java与mysql时间类型对应的问题
项目中遇到一个问题,从后台给出的json字符串中取得的时间,之后通过方法转换成 yyyy-MM-dd hh:mm:ss 的时候,转换后的得到的竟然是1969年...之后排查问题: 发现了在mayba ...