Maison php教程 php手册 ThinkPHP 整合 uploadifive实现文件上传

ThinkPHP 整合 uploadifive实现文件上传

Aug 25, 2016 am 10:19 AM

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动态传递参数,希望跟我一样遇到相同问题的人都能搜到这篇文章,以少走弯路浪费时间,有问题留言,我会关注的~~

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
1 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Tags d'article chaud

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Découvrez des exemples de code d'introduction à la programmation Python. Découvrez des exemples de code d'introduction à la programmation Python. Jan 04, 2024 am 10:50 AM

Découvrez des exemples de code d'introduction à la programmation Python.

Variables PHP en action : 10 exemples concrets d'utilisation Variables PHP en action : 10 exemples concrets d'utilisation Feb 19, 2024 pm 03:00 PM

Variables PHP en action : 10 exemples concrets d'utilisation

Du débutant au compétent : implémentation de code de structures de données couramment utilisées en langage Go Du débutant au compétent : implémentation de code de structures de données couramment utilisées en langage Go Mar 04, 2024 pm 03:09 PM

Du débutant au compétent : implémentation de code de structures de données couramment utilisées en langage Go

Comment utiliser PHP pour écrire le code de la fonction de gestion des stocks dans le système de gestion des stocks Comment utiliser PHP pour écrire le code de la fonction de gestion des stocks dans le système de gestion des stocks Aug 06, 2023 pm 04:49 PM

Comment utiliser PHP pour écrire le code de la fonction de gestion des stocks dans le système de gestion des stocks

Exemples de programmation en langage Go : exemples de code dans le développement Web Exemples de programmation en langage Go : exemples de code dans le développement Web Mar 04, 2024 pm 04:54 PM

Exemples de programmation en langage Go : exemples de code dans le développement Web

Java implémente un code de tri à bulles simple Java implémente un code de tri à bulles simple Jan 30, 2024 am 09:34 AM

Java implémente un code de tri à bulles simple

Guide d'interconnexion Huawei Cloud Edge Computing : exemples de code Java pour implémenter rapidement des interfaces Guide d'interconnexion Huawei Cloud Edge Computing : exemples de code Java pour implémenter rapidement des interfaces Jul 05, 2023 pm 09:57 PM

Guide d'interconnexion Huawei Cloud Edge Computing : exemples de code Java pour implémenter rapidement des interfaces

Conseils et exemples : Apprenez à implémenter l'algorithme de tri par sélection en Java Conseils et exemples : Apprenez à implémenter l'algorithme de tri par sélection en Java Feb 18, 2024 am 10:52 AM

Conseils et exemples : Apprenez à implémenter l'algorithme de tri par sélection en Java

See all articles