Posted on September 29, 2019 at 5:25 pm
Today I found this awesome jQuery file upload plugin:
http://simpleupload.michaelcbrook.com/
The official simpleUpload.js jQuery plugin page on Github is this:
https://github.com/michaelcbrook/simpleUpload.js
The plugin is hosted by Content Delivery Network (CDN) JsDelivr:
https://www.jsdelivr.com/package/npm/jquery-simple-upload
Below there is an example to use the jQuery plugin showing a progress bar.
The JavaScript section looks like this:
$(document).ready(function(){ $('input[type=file]').change(function(){ $(this).simpleUpload("/ajax/upload.php", { start: function(file){ //upload started $('#filename').html(file.name); $('#progress').html(""); $('#progressBar').width(0); }, progress: function(progress){ //received progress $('#progress').html("Progress: " + Math.round(progress) + "%"); $('#progressBar').width(progress + "%"); }, success: function(data){ //upload successful $('#progress').html("Success!<br>Data: " + JSON.stringify(data)); }, error: function(error){ //upload failed $('#progress').html("Failure!<br>" + error.name + ": " + error.message); } }); }); }); |
The HTML section looks like this:
<div id="filename"></div> <div id="progress"></div> <div id="progressBar"></div> <input type="file" name="file"> |
The server-side PHP script looks like this:
// We'll output data in JSON format header("Content-Type: application/json; charset=utf-8"); // All of your application logic with $_FILES["file"] goes here // $output will be converted into JSON if ($success) { $output = array("success" => true, "message" => "Success!"); } else { $output = array("success" => false, "error" => "Failure!"); } // Convert $output into JSON echo json_encode($output); |
You can change file upload button like this:
<style>.box{display:inline-block;width:70px;height:70px;background-color:white;border:4px dashed #b5b5b5;color:#b5b5b5;font-size:50px;text-align:center;padding:30px}</style> <label for="file"><div class="box">+</div></label> <input type="file" id="file" name="file" style="display: none;"> |
It is small, fast, simple and very easy to use!
It also support multiple file uploads and much more.
http://simpleupload.michaelcbrook.com/
Other Posts
- Route OpenVPN Connections Through Floating IP
- How to Configure a Floating IP in a VPS (Hetzner)
- Set OpenVPN to Listed on a Specific IP Address
- Bash Trim Leading and Trailing Whitespace from a String
- Bash Get Name of Ethernet Network Interface
- VPN Providers with Dedicated Static IP Address
- OpenVPN Iptables Rules
- WireGuard VPN Iptables Rules
Updated Posts
- AMD Chipsets & Graphics Card Drivers for Windows 7, 8, 10
- AMD Radeon 7400 Drivers for Windows 10
- How to pass custom command-line parameters in InnoSetup
- Add Desktop shortcut for all Windows PC users
- Programmatically create desktop icon with InnoSetup
- GeneratePress - a Lightweight WordPress Theme 2021
- InnoSetup disable DesktopIcon via command-line
- Use cURL to authenticate with JWT Bearer tokens