搜尋
首頁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 />     $('.uploadifive').uploadifive({<br />         'auto'          : true,     //使用自動上傳<br />         'width'         : '80px',   //按鈕寬度<br />         'height'        : '20px',   //按鈕高度<br />         'uploadScript'  : '/Index/uploadifive',  //上傳方式<br />         'fileObjName'   : 'mp3',<br />         'buttonText'    : '上傳」,<br />         'queueID'       : 'proccess',   //顯示佇列的ID<br />         'fileType'      : '*.mp3',<br />         'multi'         : false,<br />         'fileSizeLimit' : '5MB',<br />         'uploadLimit'   : 1,<br />         'removeTimeout' : 0,<br />         'queueSizeLimit'    : 1,<br />         'removeCompleted'   : true,   //已在上傳完成後自動隱藏清單<br />         //'formData'        : {'pid' : 1111},  //傳遞靜態參數有用,且傳送變數無用<br />         'onAddQueueItem' : function(file){<br />             this.data('uploadifive').settings.formData = {'id':$(this).data('id')}; ​​   //傳遞動態參數方法<br />         },<br />         'onUploadComplete' : function(file, data){<br />             var obj = JSON.parse(data);<br />             if (obj.status == 'success'){<br />                 layer.msg('已成功使用!』,{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('uploadifive'),<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.能量晶體解釋及其做什麼(黃色晶體)
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您聽不到任何人,如何修復音頻
4 週前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它們
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一個PHP/MySQL的Web應用程序,非常容易受到攻擊。它的主要目標是成為安全專業人員在合法環境中測試自己的技能和工具的輔助工具,幫助Web開發人員更好地理解保護網路應用程式的過程,並幫助教師/學生在課堂環境中教授/學習Web應用程式安全性。 DVWA的目標是透過簡單直接的介面練習一些最常見的Web漏洞,難度各不相同。請注意,該軟體中

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),