This is another file and image upload tutorial using jQuery. I am using Blueimp jQuery Plugin to upload files into the server folder using JavaScript and PHP. PHP for server-side programming to upload files and images on the server.
Blueimp jQuery Plugin
Blue-imp File Upload widget has many features like multiple file selection, drag&drop support, progress bar, validation and preview images, audio and video for jQuery.
It also supports cross-domain, chunked and resumable file uploads. You can integrate with any server-side platform (Google App Engine, PHP, Python, Ruby on Rails, Java, etc.) that supports standard HTML form file uploads.
jQuery File Upload application file structure as below:
index.html
: This file will have HTML code to display add file and list-down all uploaded files.common.js
: This file will contain all jquery code to upload files and images.server/index.php
: This file will create the main php handler class object.server/UploadHandler.php
: This file will have all handler methods to upload and save into a folder.server/files
: This folder will contain the uploaded image and thumbnail of file/image.
Also Checkout other useful jQuery tutorials,
- Simple Example of Pagination Using jQuery and Bootstrap
- Multi Step Form with Progress Bar using jQuery and Bootstrap CSS
- Simple Example of Hide, Show and Toggle Element Using jQuery
- Dynamically Add and Remove rows in a Table Using jquery
How to upload Files and Images using jQuery Widget
We need to download libs from Github Repo and include them as a local repository.
How To Install Using npm
jQuery File Upload can be installed via NPM:
npm install blueimp-file-upload
You can also use the CDN path for blueimp file upload libs. I am using the CDN path in the head section of index.html
file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included --> <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.19.2/js/vendor/jquery.ui.widget.js"></script> <!-- The Templates plugin is included to render the upload/download listings --> <script src="//blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"></script> <!-- Bootstrap JS is not required, but included for the responsive demo navigation --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <!-- The Load Image plugin is included for the preview images and image resizing functionality --> <script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script> <!-- The Canvas to Blob plugin is included for image resizing functionality --> <script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script> <!-- Bootstrap JS is not required, but included for the responsive demo navigation --> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <!-- The Iframe Transport is required for browsers without support for XHR file uploads --> <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.19.2/js/jquery.iframe-transport.min.js"></script> <!-- The basic File Upload plugin --> <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.19.2/js/jquery.fileupload.min.js"></script> <!-- The File Upload processing plugin --> <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.19.2/js/jquery.fileupload-process.min.js"></script> <!-- The File Upload image preview & resize plugin --> <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.19.2/js/jquery.fileupload-image.min.js"></script> <!-- The File Upload validation plugin --> <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.19.2/js/jquery.fileupload-validate.min.js"></script> <!-- The File Upload user interface plugin --> <script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-file-upload/9.19.2/js/jquery.fileupload-ui.min.js"></script> <script src="common.js"></script>
I have only used Bootstrap and jQuery libs as dependency files for blueimp upload plugin. We have created a separate common.js
file for JavaScript code of file upload.
We will create a widget button to add files, start the upload, cancel the upload, and delete the upload. We need to add the code below into index.html
file.
<form id="fileupload" action="//demo-test/" enctype="multipart/form-data" method="POST"> <!-- Redirect browsers with JavaScript disabled to the origin page --> <noscript><input type="hidden" name="redirect" value="//demo-test/"></noscript> <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload --> <div class="well row fileupload-buttonbar"> <div class="col-lg-7"> <!-- The fileinput-button span is used to style the file input field as button --> <span class="btn btn-success fileinput-button"> <i class="glyphicon glyphicon-plus"></i> Add files... <input multiple="multiple" name="files[]" type="file"> </span> <button class="btn btn-primary start" type="submit"> <i class="glyphicon glyphicon-upload"></i> Start upload </button> <button class="btn btn-warning cancel" type="reset"> <i class="glyphicon glyphicon-ban-circle"></i> Cancel upload </button> <button class="btn btn-danger delete" type="button"> <i class="glyphicon glyphicon-trash"></i> Delete </button> <input class="toggle" type="checkbox"> <!-- The global file processing state --> </div> <!-- The global progress state --> <div class="col-lg-5 fileupload-progress fade"> <!-- The global progress bar --> <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"> <div class="progress-bar progress-bar-success" style="width: 0%;"> </div> </div> <!-- The extended global progress state --> <div class="progress-extended"> </div> </div> </div> </form>
We will add the bootstrap table to list down all uploaded and added(pending to upload) upload files.
We have jQuery template libs to create upload/uploaded templates using jQuery and HTML. We will add the below code into the bottom of index.html
file.
<script id="template-upload" type="text/x-tmpl"> {% for (var i=0, file; file=o.files[i]; i++) { %} <tr class="template-upload fade"> <td> <span class="preview"></span> </td> <td> <p class="name">{%=file.name%}</p> <strong class="error text-danger"></strong> </td> <td> <p class="size">Processing...</p> <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div> </td> <td> {% if (!i && !o.options.autoUpload) { %} <button class="btn btn-primary start" disabled> <i class="glyphicon glyphicon-upload"></i> <span>Start</span> </button> {% } %} {% if (!i) { %} <button class="btn btn-warning cancel"> <i class="glyphicon glyphicon-ban-circle"></i> <span>Cancel</span> </button> {% } %} </td> </tr> {% } %} </script> <!-- The template to display files available for download --> <script id="template-download" type="text/x-tmpl"> {% for (var i=0, file; file=o.files[i]; i++) { %} <tr class="template-download fade"> <td> <span class="preview"> {% if (file.thumbnailUrl) { %} <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" data-gallery><img src="{%=file.thumbnailUrl%}"></a> {% } %} </span> </td> <td> <p class="name"> {% if (file.url) { %} <a href="{%=file.url%}" title="{%=file.name%}" download="{%=file.name%}" {%=file.thumbnailUrl?'data-gallery':''%}>{%=file.name%}</a> {% } else { %} <span>{%=file.name%}</span> {% } %} </p> {% if (file.error) { %} <div><span class="label label-danger">Error</span> {%=file.error%}</div> {% } %} </td> <td> <span class="size">{%=o.formatFileSize(file.size)%}</span> </td> <td> {% if (file.deleteUrl) { %} <button class="btn btn-danger delete" data-type="{%=file.deleteType%}" data-url="{%=file.deleteUrl%}"{% if (file.deleteWithCredentials) { %} data-xhr-fields='{"withCredentials":true}'{% } %}> <i class="glyphicon glyphicon-trash"></i> <span>Delete</span> </button> <input type="checkbox" name="delete" value="1" class="toggle"> {% } else { %} <button class="btn btn-warning cancel"> <i class="glyphicon glyphicon-ban-circle"></i> <span>Cancel</span> </button> {% } %} </td> </tr> {% } %} </script>
We will add a jQuery code into a common.js
file to upload and send ajax requests to the php server.
$(function () { 'use strict'; // Initialize the jQuery File Upload widget: $('#fileupload').fileupload({ // Uncomment the following to send cross-domain cookies: //xhrFields: {withCredentials: true}, url: 'server/' //console.log('ggggg') }); // Enable iframe cross-domain access via redirect option: $('#fileupload').fileupload( 'option', 'redirect', window.location.href.replace( /\/[^\/]*$/, '/cors/result.html?%s' ) ); if (window.location.hostname === 'demo-test') { $('#fileupload').fileupload('option', { url: '//demo-test/server/', // Enable image resizing, except for Android and Opera, // which actually support image resizing, but fail to // send Blob objects via XHR requests: disableImageResize: /Android(?!.*Chrome)|Opera/ .test(window.navigator.userAgent), //maxFileSize: 999000, acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i }); // Upload server status check for browsers with CORS support: if ($.support.cors) { console.log(window.location.hostname); $.ajax({ url: '//demo-test/', type: 'HEAD' }).fail(function () { $(' <div class="alert alert-danger">') .text('Upload server currently unavailable - ' + new Date()) .appendTo('#fileupload'); }); } } else { // Load existing files: console.log(window.location.hostname); $('#fileupload').addClass('fileupload-processing'); $.ajax({ // Uncomment the following to send cross-domain cookies: //xhrFields: {withCredentials: true}, url: $('#fileupload').fileupload('option', 'url'), dataType: 'json', context: $('#fileupload')[0] }).always(function () { $(this).removeClass('fileupload-processing'); }).done(function (result) { $(this).fileupload('option', 'done') .call(this, $.Event('done'), {result: result}); }); } }); </div>
Where 'demo-test'
is the hostname and ‘/server’ is the folder name that will have PHP upload handler file.
We will add php server-side file upload files into the server folder, You can get from Github Repo
Conclusion:
This jQuery file upload tutorial has single and multiple file uploads. You can also upload multiple images/files as well as delete them. It also supports drag and drop file upload of multiple files and images.
You can download source code from the below link