搜索
首页php教程php手册ThinkPHP 整合 uploadifive实现文件上传

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

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

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

第五步:没有了~

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

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

螳螂BT

螳螂BT

Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具