Thinkphp整合uploadifive进行动态参数传递,内容列表按钮实现一键上传文件
兜兜转转又回到TP了。。有大几年都在用CI写项目,最近回到TP来,项目中有一个功能花了点时间,特分享出来。
就是,后台内容列表里每一条记录都放一个按钮,可以快速进行文件上传(不需要点击编辑进入详情再上传),就想到了以前用过的uploadify,但由于办公室多数同事都用MAC,则uploadifive更合适。
废话不多说,上代码:
第一步,加载jquery.js/uploadifive.js/uploadifive.css
第二步,构建HTML列表:<table>
<tr><td>商品名称1</td><td><input data-id="1" type="file" class="uploadifive" /></td></tr>
<tr><td>商品名称2</td><td><input data-id="2" type="file" class="uploadifive" /></td></tr>
</table>
<div id="proccess"></div>说明:本段代码模仿后台商品列表,实际模板应是循环。每一行都显示一个文件上传按钮,由于单页面有多个上传,故使用类名.uploadifive(不能使用ID名),把内容ID写在file控件上备用;

第三步,模板上写JS代码:<script>$(function(){
$('.uploadifive').uploadifive({
'auto' : true, //自动上传
'width' : '80px', //按钮宽度
'height' : '20px', //按钮高度
'uploadScript' : '/Index/uploadifive', //上传方法
'fileObjName' : 'mp3',
'buttonText' : '上传',
'queueID' : 'proccess', //显示队列的ID
'fileType' : '*.mp3',
'multi' : false,
'fileSizeLimit' : '5MB',
'uploadLimit' : 1,
'removeTimeout' : 0,
'queueSizeLimit' : 1,
'removeCompleted' : true, //上传完成后自动隐藏列表
//'formData' : {'pid' : 1111}, //传静态参数有用,传变量无用
'onAddQueueItem' : function(file){
this.data('uploadifive').settings.formData = {'id':$(this).data('id')}; //传递动态参数方法
},
'onUploadComplete' : function(file, data){
var obj = JSON.parse(data);
if (obj.status == 'success'){
layer.msg('上传成功!',{icon:1,time:1500},function(){
window.location.reload();
});
} else {
layer.msg("上传失败!",{icon:2});
}
},
onCancel : function(file){
$data = $(this).data('uploadifive'),
settings = $data.settings;
settings.uploadLimit++;
layer.msg(file.name + " 已取消上传~",{icon:2});
},
});
});
</script>说明:本段代码是重点,因为在获取内容ID的时候花了些时间,度娘了国内所有资料发现均无法动态传参,都说得乱七八糟的,最后翻墙去了google一分钟不到就解决了〜uploadifive里动态传递参数可以在onAddQueueItem里面定义,可以用jquery语法,可以定义多个参数。

第四步:在控制器里面创建uploadifive方法,上传代码可以直接用ThinkPHP提供的,上传到本地、服务器、或云存储都是很方便的,上传成功后返回相关状态给模板JS的onUploadComplete方法即可。由于实际项目中实现逻辑不一样,这里的代码就不贴出来了,可以自行创建。

第五步:没有了〜

总结:一、本例程用到了uploadifive HTML5上传插件,该版本是收费的,因版权问题我就不发出来了,大家自行度娘之〜实在找不到的私信我,用邮箱发送;
二、本例程用的是自动上传,所以获取内容ID是关键,如果是表单手动上传,则简单一些;
三、本例也使用了layer插件,需要用的也需要下载并在头部加载进来;
好吧,我承认本文重点要说的就是uploadifive动态传递参数,希望跟我一样遇到相同问题的人都能搜到这篇文章,以少走弯路浪费时间,有问题留言,我会关注的〜〜

评论() 相关

收藏

赞

_syntax_error

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。