百度webuploader上传组件学习,Java版
2016-01-28 14:02
405 查看
点击官方链接
纯js,无需jar包
解压后直接放在项目中。在jsp页面引入css和js
页面div
因为要用到自己的项目中,所以要稍微加工改造,适应自己的项目
点击保存按钮,开始上传
上传文件到服务器
因为本人只用到了上传文件,图片上传大同小异
爱学习的朋友们加 刚建的qq群交流学习<程序员之家 227493974>
纯js,无需jar包
开始学习
前台页面和js
点击下载插件 webuploader-0.1.5.zip解压后直接放在项目中。在jsp页面引入css和js
<link rel="stylesheet" type="text/css" href="webuploader/css/UploadStyle.css">//用来设置上传内容列表的样式 <link rel="stylesheet" type="text/css" href="webuploader/css/webuploader.css">//用来设置上传按钮的样式 <link rel="stylesheet" type="text/css" href="webuploader/css/bootstrap.min.css">//用来设置上传进度条的样式 <script type="text/javascript" src="webuploader/webuploader.js">官方js <script type="text/javascript" src="js/webuploader_up.js">上传专用js
页面div
<div id="wrapper"> <div id="post-container" class="container"> <div class="col-md-9"> <div class="page-container"> <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> </div> </div> </div> </div> </div>
webuploader_up.js
// 文件上传 jQuery(function() { var $ = jQuery, $list = $('#thelist'), $btn = $('#ctlBtn'), state = 'pending', uploader; uploader = WebUploader.create({ // 不压缩image resize: false, // swf文件路径,需要用到flash的时候BASE_URL自己根据需要定义 也可写成绝对路径 swf: BASE_URL + '/js/Uploader.swf', // 文件接收服务端。此处根据自己的框架写,本人用的是SpringMVC server: 'docs/uploadFileOther.htm', // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: '#picker' }); // 当有文件添加进来的时候 uploader.on( 'fileQueued', function( file ) { $list.append( '<div id="' + file.id + '" class="item">' + '<h4 class="info">' + file.name + '</h4>' + '<p class="state">等待上传...</p>' + '</div>' ); }); // 文件上传过程中创建进度条实时显示。 uploader.on( 'uploadProgress', function( file, percentage ) { 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( '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(); }); uploader.on( 'all', function( type ) { if ( type === 'startUpload' ) { state = 'uploading'; } else if ( type === 'stopUpload' ) { state = 'paused'; } else if ( type === 'uploadFinished' ) { state = 'done'; } if ( state === 'uploading' ) { $btn.text('暂停上传'); } else { $btn.text('开始上传'); } }); $btn.on( 'click', function() { if ( state === 'uploading' ) { uploader.stop(); } else { uploader.upload(); } }); });
因为要用到自己的项目中,所以要稍微加工改造,适应自己的项目
点击保存按钮,开始上传
后台Java代码
接收文件,相比到这里大家都可以写了上传文件到服务器
因为本人只用到了上传文件,图片上传大同小异
爱学习的朋友们加 刚建的qq群交流学习<程序员之家 227493974>
相关文章推荐
- eclipse中使用maven插件的时候,运行run as maven build的时候报错
- 如何配置jdk和使用
- Dubbo与Zookeeper、SpringMVC整合和使用(负载均衡、容错)
- Java强制转化
- Java里接口的相关知识
- Java简易计算器
- Java中的自动装箱与拆箱
- 常见 Java 字节码 指令 助记符
- Java中的get()和set()方法
- JAVA基础----java中E,T,?的区别?
- MyEclipse2014破解小记
- springmvc之json数据交互controller方法返回值为简单类型
- JAVA中最常用的十个快捷键
- Java 定时任务
- Eclipse搭建Maven工程集成Spring4+Hibernate5
- Java WebService 简单实例
- Use the endorsed directory mechanism to place jaxb-api.jar(jaxb-api.jar、jaxws-api.jar与jdk1.6不兼容问题)
- java 并发笔记
- Java中的集合
- Eclipse ADT 插件安装慢的解决的方法