关于上传图片插件webuploader的使用(同一个页面存在多个实例):
来源:互联网 发布:淘宝小二有什么用 编辑:程序博客网 时间:2024/06/01 10:43
一个页面只存在一个实例时比较容易,只需要用对应的id做显示即可;
而当一个页面存在多个实例时,即需要很多个上传按钮,并且需要带参数时,如图,
先统一设置一个class,然后进度框中对id进行唯一性处理:
js代码如下,大致思路是先设置一个js全局变量i,点击哪个上传按钮就把id赋值给i,然后上传过程即可控制进度框在哪个id框中显示,该插件也能携带数据提交到后台处理
<!--引入JS--> <script type="text/javascript" src="__STATIC__/webuploader/dist/webuploader.js"></script> <!--SWF在初始化的时候指定,在后面将展示--> <script> window.id=0; function add_id(id){ window.id = id; console.log(window.id); } </script> <!--SWF在初始化的时候指定,在后面将展示--> <script> // 初始化Web Uploader var uploader = WebUploader.create({ // 选完文件后,是否自动上传。 auto: true, // swf文件路径 swf: '__STATIC__/dist/Uploader.swf', // 文件接收服务端。 server: "{:U('Datas/web_upload',array('session_id'=>session_id()))}", //server: 'http://webuploader.duapp.com/server/fileupload.php', // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: '.filePicker', // 只允许选择图片文件。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } }); //当有文件添加进来的时候 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实例 $('#fileList_'+window.id).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 ); }, 100,100 ); }); // 文件上传过程中创建进度条实时显示。 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 ) { var $li = $( '#'+file.id ), $error = $li.find('div.error'); // 避免重复创建 if ( !$error.length ) { $error = $('<div class="error" style="background: green"></div>').appendTo( $li ); } $error.text('上传成功'); $( '#'+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(); }); uploader.on( 'uploadBeforeSend', function( block, data ) { // block为分块数据。 // file为分块对应的file对象。 var file = block.file; // 修改data可以控制发送哪些携带数据。 data.id = window.id; }); //修改按钮默认样式 $('.webuploader-pick').css('display','inline'); $('.webuploader-pick').unbind("mouseenter").unbind("mouseleave"); $('.webuploader-pick').removeClass("webuploader-pick"); </script>
阅读全文
1 1
- 关于上传图片插件webuploader的使用(同一个页面存在多个实例):
- WebUploader文件图片上传插件的使用
- webuploader在同一个页面支持多个按钮实例,类似京东那样的评论
- 多图片上传插件webuploader
- 使用百度webuploader插件进行多文件类型分片上传实例
- 使用百度webuploader插件进行多文件类型分片上传实例
- WebUploader图片上传实例
- 使用WebUploader上传图片
- 上传插件webuploader.js的使用示例
- 文件上传插件WebUploader的使用
- 百度图片上传 webuploader插件
- WebUploader 图片上传插件前后端代码
- asp.net使用百度的webuploader批量上传图片
- Webuploader图片上传控件的使用,项目中都可以引用
- Asp.Net Mvc 使用WebUploader 多图片上传
- Asp.Net Mvc 使用WebUploader 多图片上传
- Asp.Net Mvc 使用WebUploader 多图片上传
- 百度上传插件webuploader使用心得
- digest ~ 摘要认证
- Apache和Tomcat整合
- stm32 link 下载bin文件
- Android自定义Toast 解决关闭通知 Toast无法弹出
- Java 循环结构
- 关于上传图片插件webuploader的使用(同一个页面存在多个实例):
- maven学习笔记:20170606
- 以太坊(3):以太坊私有链环境下的智能合约的编写、编译、创建与执行
- 【线程间同步】Android线程之间如何进行同步
- php源码str_repeat有趣的实现
- JEESITE登录流程简单梳理
- Android蓝牙开发(二)
- oracle数据库导出
- 自动管理的花园