首頁  >  文章  >  php教程  >  ThinkPHP 整合 uploadifive實作檔上傳

ThinkPHP 整合 uploadifive實作檔上傳

WBOY
WBOY原創
2016-08-25 10:19:451788瀏覽

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