Web Uploader上传组件
来源:互联网 发布:适合孕妇的软件 编辑:程序博客网 时间:2024/05/22 17:48
Web Uploader上传组件
问题记录。
> 1、项目依赖jQuery> 2、初始化配置项实现默认功能
创建Web Uploader实例,例如:
// 初始化Web Uploadervar uploader = WebUploader.create({ // 选完文件后,是否自动上传。 auto: true, // swf文件路径 swf: BASE_URL + '/js/Uploader.swf', // 文件接收服务端。 server: 'http://webuploader.duapp.com/server/fileupload.php', // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: '#filePicker', // 只允许选择图片文件。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' }});
监听fileQueued事件,通过uploader.makeThumb来创建图片预览图。
// 当有文件添加进来的时候uploader.on( 'fileQueued', function( file ) { var $li = $( '<div id="' + file.id + '" class="file-item thumbnail">' + '<img>' + '<div class="info">' + file.name + '</div>' + '</div>' ), $img = $li.find('img'); // $list为容器jQuery实例 $list.append( $li ); // 创建缩略图 // 如果为非图片文件,可以不用调用此方法。 // thumbnailWidth x thumbnailHeight 为 100 x 100 uploader.makeThumb( file, function( error, src ) { if ( error ) { $img.replaceWith('<span>不能预览</span>'); return; } $img.attr( 'src', src ); }, thumbnailWidth, thumbnailHeight );});
上传状态提示了,当文件上传过程中, 上传成功,上传失败,上传完成都分别对应uploadProgress, uploadSuccess, uploadError, uploadComplete事件。
// 文件上传过程中创建进度条实时显示。uploader.on( 'uploadProgress', function( file, percentage ) { var $li = $( '#'+file.id ), $percent = $li.find('.progress span'); // 避免重复创建 if ( !$percent.length ) { $percent = $('<p class="progress"><span></span></p>') .appendTo( $li ) .find('span'); } $percent.css( 'width', percentage * 100 + '%' );});// 文件上传成功,给item添加成功class, 用样式标记上传成功。uploader.on( 'uploadSuccess', function( file ) { $( '#'+file.id ).addClass('upload-state-done');});// 文件上传失败,显示上传出错。uploader.on( 'uploadError', function( file ) { var $li = $( '#'+file.id ), $error = $li.find('div.error'); // 避免重复创建 if ( !$error.length ) { $error = $('<div class="error"></div>').appendTo( $li ); } $error.text('上传失败');});// 完成上传完了,成功或者失败,先删除进度条。uploader.on( 'uploadComplete', function( file ) { $( '#'+file.id ).find('.progress').remove();});
0 0
- Web Uploader上传组件
- 功能强大的HTML5上传组件-Web Uploader
- HTML5功能强大的上传组件-Web Uploader
- 百度上传组件web uploader介绍+快速入门案例
- Fine Uploader文件上传组件
- Fine Uploader文件上传组件
- Fine Uploader文件上传组件
- 文件上传插件 Web Uploader
- 文件上传插件web uploader
- valums file-uploader: js文件上传组件
- fine uploader文件上传JS组件
- Fine Uploader文件上传组件应用介绍
- Web Uploader 高性能上传解决方案
- Web Uploader图片上传 java实现
- web uploader上传图片 springmvc 后台
- Web uploader上传word,pdf实例
- Web Uploader
- Web Uploader
- 苏州初印象
- Java中改变应用程序界面外观(javax.swing.UIManager类和LookAndFeel类)
- 机器学习-实战-入门-iris数据分析
- ubuntu 安装HDF5 ,torch-hdf5,loadcaffe等
- Redis 命令与键(key)
- Web Uploader上传组件
- android 获得通话记录
- python学习笔记(六)网络编程
- Java线程面试题 Top 50 (转载)
- 基于卷积神经网络的手写汉字识别[matlab版本][可识别509类汉字]
- Android 如何判断拨打电话对方是否接听
- opencv3.x+opencv_contrib安装
- MyBatis_4
- SSH使用QBC查询时无法将查处的集合存入实体集合中,而是返回Object[]