tp5框架使用webuploader插件上传图片
2018-01-29 15:48
645 查看
这是效果图
上传后的样式有点问题,这里就先不调样式了
以下是代码:
首先在页面中引入webuploader插件需要的css和js文件
这里是script标签中的内容—-我写在了同一个页面中,你们也可以选择引入文件
// 初始化Web Uploader
var uploader = WebUploader.create({
这样,在页面中就可以先看到效果了,选择
4000
完图片就可以预览,控制器中接收图片的方法,tp5框架手册中的方法就可以接收到.我使用的也是手册中的方法
上传后的样式有点问题,这里就先不调样式了
以下是代码:
首先在页面中引入webuploader插件需要的css和js文件
<div class="input_g"> <div class="input_title">产品图:</div> <!-- <div class="input_info"><img src="__IMAGE__/add_img.jpg" width="80" height="60" alt=""/></div> --> <!--用来存放item--> <div id="fileList" class="uploader-list"></div> <div id="filePicker">选择图片</div> </div>
这里是script标签中的内容—-我写在了同一个页面中,你们也可以选择引入文件
// 初始化Web Uploader
var uploader = WebUploader.create({
// 选完文件后,是否自动上传。 auto: true, // swf文件路径--这里的路径一定要写对 swf: '/static/webuploader/Uploader.swf', // 文件接收服务端--这里选择提交到的控制器的方法就可以 server: '{:url("portal/product/upload")}', // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: '#filePicker', // 只允许选择图片文件。 accept: { title: 'Images', extensions: 'gif,jpg,jpeg,bmp,png', mimeTypes: 'image/*' } }); // 当有文件添加进来的时候 uploader.on( 'fileQueued', function( file ) { var $list=$("#fileList"); var thumbnailWidth = 100; //缩略图高度和宽度 (单位是像素),当宽高度是0~1的时候,是按照百分比计算,具体可以看api文档 var thumbnailHeight = 100; 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 ); }); // 文件上传过程中创建进度条实时显示。 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(); });
这样,在页面中就可以先看到效果了,选择
4000
完图片就可以预览,控制器中接收图片的方法,tp5框架手册中的方法就可以接收到.我使用的也是手册中的方法
相关文章推荐
- tp3.1使用webuploader0.1.5插件上传图片
- WebUploader文件图片上传插件的使用
- 使用上传插件 Web Uploader 上传图片到七牛云(C#)
- 关于上传图片插件webuploader的使用(同一个页面存在多个实例):
- 使用Webuploader和图片Base64特性完成IE8及其它浏览器的头像上传
- Java中使用WebUploader插件上传大文件单文件和多文件的方法小结
- 使用WebUploader上传图片
- 使用webuploader上传图片
- Asp.Net Mvc 使用WebUploader 多图片上传
- WEUI原生以及使用webuploader插件上传方法
- 使用WebUploader客户端批量上传图片,后台使用springMVC接收实例
- jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
- 【原创】php无框架webuploader上传图片以base64形式保存到数据库
- 百度上传插件WEB UPLOADER教程_WEB UPLOADER使用DEMO实例
- WebUploader 图片上传控件使用范例
- Android 开发 使用WebUploader解决安卓微信浏览器上传图片中遇到的bug
- 使用WebUploader解决安卓微信浏览器上传图片中遇到的bug
- 【项目相关】MVC中使用WebUploader进行图片预览上传以及编辑
- MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件02-多文件上传
- jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)