最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
WebUploader文件上传组件示例
时间:2016-08-24 编辑:简简单单 来源:一聚教程网
JAVASCRIPT
首先创建Web Uploader实例:
代码如下 | 复制代码 |
var uploader = WebUploader.create({ |
接着监听fileQueued事件,即当有文件添加进来的时候,通过uploader.makeThumb来创建图片预览图。
代码如下 | 复制代码 |
uploader.on( 'fileQueued', function( file ) { ' + file.name + ' ' + ' ' ), $img = $li.find('img'); // $list为容器jQuery实例 $list.append( $li ); // 创建缩略图 uploader.makeThumb( file, function( error, src ) { if ( error ) { $img.replaceWith(' 不能预览 '); return; } $img.attr( 'src', src ); }, 100, 100 ); //100x100为缩略图尺寸 }); // 文件上传过程中创建进度条实时显示。 |
到这里,我们就实现了一个简单的图片上传实例,点击“选择图片”会弹出文件选择对话框,当选择图片后,即进入上传图片流程,会将图片对应的缩略图现实在列表里。
-
上一个: React实现轮播组件的开发例子
-
下一个: JS 反射捷径分析详解
相关文章
- Laravel 5.2文件上传的功能使用示例 08-27
- Plupload上传组件 + java实现文件上传例子 05-13
- Swift HTTP网络操作库Alamofire实现文件上传详解 12-09
- SWFObject文件上传插件的使用教程 10-09
- java中struts2实现文件上传下载功能 05-30
- SWFUpload文件上传插件用法详解 06-08