ThinkPHP integrates uploadifive to implement file upload
- WBOYOriginal
- 2016-08-25 10:19:451801browse
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>Note: This code imitates the backend product list, and the actual template should be a loop. Each line displays a file upload button. Since there are multiple uploads on a single page, the class name .uploadifive is used (ID names cannot be used), and the content ID is written on the file control for later use;
The third step is to write JS code on the template: <script>$(function(){<br>
$('.uploadifive').uploadifive({<br>
'auto' : true, //Automatically upload<br>
‘width’ : ‘80px’, //Button width<br>
‘uploadScript’ : ‘/Index/uploadifive’, //Upload method<br>
‘fileObjName’ : ‘mp3’,<br>
‘buttonText’ : ‘Upload’,<br>
'queueID' : 'proccess', //Display the ID of the queue<br>
‘fileType’ : ‘*.mp3’,<br>
‘multi’ : false,<br>
‘fileSizeLimit’ : ‘5MB’,<br>
'uploadLimit' : 1,<br>
'removeTimeout' : 0,<br>
'queueSizeLimit' : 1,<br>
'removeCompleted' : true, //Automatically hide the list after the upload is completed<br>
'onAddQueueItem': function(file){<br>
This.data('uploadifive').settings.formData = {'id':$(this).data('id')}; //Pass dynamic parameter method<br>
},<br>
'onUploadComplete' : function(file, data){<br>
var obj = JSON.parse(data);<br>
If (obj.status == 'success'){<br>
layer.msg('Upload successful!',{icon:1,time:1500},function(){<br>
window.location.reload();<br>
});<br>
} else {<br>
layer.msg("Upload failed!",{icon:2});<br>
}<br>
},<br>
onCancel: function(file){<br>
$data
Settings = $data.settings;<br>
settings.uploadLimit++;<br>
layer.msg(file.name + "Upload canceled~",{icon:2});<br>
},<br>
});<br>
});<br></script>Explanation: This code is the key point, because it took some time to obtain the content ID. I found that all domestic materials could not dynamically transfer parameters, and they were all messed up. In the end, I went over the wall. Google solved it in less than a minute~ The dynamically passed parameters in uploadifive can be defined in onAddQueueItem, using jquery syntax, and multiple parameters can be defined.
Step 4: Create the uploadifive method in the controller. The upload code can be directly provided by ThinkPHP. It is very convenient to upload to local, server, or cloud storage. After the upload is successful, return the relevant status to the onUploadComplete method of the template JS. . Since the implementation logic in actual projects is different, the code here will not be posted. You can create it yourself.
Step 5: No more~
Summary: 1. This routine uses the uploadifive HTML5 upload plug-in. This version is chargeable. Due to copyright issues, I will not publish it. You can try it by yourself. If you can’t find it, send me a private message and send it by email;
2. This routine uses automatic upload, so getting the content ID is the key. If it is a manual upload, it is simpler;
3. This example also uses the layer plug-in. If you need to use it, you need to download it and load it in the header;
Okay, I admit that the main point of this article is uploadifive’s dynamic transmission of parameters. I hope that people who encounter the same problem as me can find this article to avoid detours and waste time. If you have any questions, leave a message and I will pay attention~ ~