ThinkPHP 整合 uploadifive實作檔上傳
- WBOY原創
- 2016-08-25 10:19:451791瀏覽
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動態傳遞參數，希望跟我一樣遇到相同問題的人都能搜到這篇文章，以少走彎路浪費時間，有問題留言，我會關注的～ ~