Home php教程 php手册 ThinkPHP integrates uploadifive to implement file upload

ThinkPHP integrates uploadifive to implement file upload

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 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~ ~

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Learn about introductory code examples for Python programming Learn about introductory code examples for Python programming Jan 04, 2024 am 10:50 AM

Learn about Python programming with introductory code examples Python is an easy-to-learn, yet powerful programming language. For beginners, it is very important to understand the introductory code examples of Python programming. This article will provide you with some concrete code examples to help you get started quickly. Print HelloWorldprint("HelloWorld") This is the simplest code example in Python. The print() function is used to output the specified content

Go language programming examples: code examples in web development Go language programming examples: code examples in web development Mar 04, 2024 pm 04:54 PM

"Go Language Programming Examples: Code Examples in Web Development" With the rapid development of the Internet, Web development has become an indispensable part of various industries. As a programming language with powerful functions and superior performance, Go language is increasingly favored by developers in web development. This article will introduce how to use Go language for Web development through specific code examples, so that readers can better understand and use Go language to build their own Web applications. 1. Simple HTTP Server First, let’s start with a

PHP variables in action: 10 real-life examples of use PHP variables in action: 10 real-life examples of use Feb 19, 2024 pm 03:00 PM

PHP variables store values ​​during program runtime and are crucial for building dynamic and interactive WEB applications. This article takes an in-depth look at PHP variables and shows them in action with 10 real-life examples. 1. Store user input $username=$_POST["username"];$passWord=$_POST["password"]; This example extracts the username and password from the form submission and stores them in variables for further processing. 2. Set the configuration value $database_host="localhost";$database_username="username";$database_pa

Java implements simple bubble sort code Java implements simple bubble sort code Jan 30, 2024 am 09:34 AM

The simplest code example of Java bubble sort Bubble sort is a common sorting algorithm. Its basic idea is to gradually adjust the sequence to be sorted into an ordered sequence through the comparison and exchange of adjacent elements. Here is a simple Java code example that demonstrates how to implement bubble sort: publicclassBubbleSort{publicstaticvoidbubbleSort(int[]arr){int

From beginner to proficient: Code implementation of commonly used data structures in Go language From beginner to proficient: Code implementation of commonly used data structures in Go language Mar 04, 2024 pm 03:09 PM

Title: From Beginner to Mastery: Code Implementation of Commonly Used Data Structures in Go Language Data structures play a vital role in programming and are the basis of programming. In the Go language, there are many commonly used data structures, and mastering the implementation of these data structures is crucial to becoming a good programmer. This article will introduce the commonly used data structures in the Go language and give corresponding code examples to help readers from getting started to becoming proficient in these data structures. 1. Array Array is a basic data structure, a group of the same type

Huawei Cloud Edge Computing Interconnection Guide: Java code examples to quickly implement interfaces Huawei Cloud Edge Computing Interconnection Guide: Java code examples to quickly implement interfaces Jul 05, 2023 pm 09:57 PM

Huawei Cloud Edge Computing Interconnection Guide: Java Code Samples to Quickly Implement Interfaces With the rapid development of IoT technology and the rise of edge computing, more and more enterprises are beginning to pay attention to the application of edge computing. Huawei Cloud provides edge computing services, providing enterprises with highly reliable computing resources and a convenient development environment, making edge computing applications easier to implement. This article will introduce how to quickly implement the Huawei Cloud edge computing interface through Java code. First, we need to prepare the development environment. Make sure you have the Java Development Kit installed (

How to use PHP to write inventory management function code in the inventory management system How to use PHP to write inventory management function code in the inventory management system Aug 06, 2023 pm 04:49 PM

How to use PHP to write the inventory management function code in the inventory management system. Inventory management is an indispensable part of many enterprises. For companies with multiple warehouses, the inventory management function is particularly important. By properly managing and tracking inventory, companies can allocate inventory between different warehouses, optimize operating costs, and improve collaboration efficiency. This article will introduce how to use PHP to write code for inventory warehouse management functions, and provide you with relevant code examples. 1. Establish the database before starting to write the code for the inventory warehouse management function.

Guidance and Examples: Learn to implement the selection sort algorithm in Java Guidance and Examples: Learn to implement the selection sort algorithm in Java Feb 18, 2024 am 10:52 AM

Java Selection Sorting Method Code Writing Guide and Examples Selection sorting is a simple and intuitive sorting algorithm. The idea is to select the smallest (or largest) element from the unsorted elements each time and exchange it until all elements are sorted. This article will provide a code writing guide for selection sorting, and attach specific Java sample code. Algorithm Principle The basic principle of selection sort is to divide the array to be sorted into two parts, sorted and unsorted. Each time, the smallest (or largest) element is selected from the unsorted part and placed at the end of the sorted part. Repeat the above

See all articles