jQuery Multiple File Upload with Progress Bar & File Preview | Frontendscript
The “File Upload” widget is a great jQuery Multiple File Upload with Progress Bar plugin that allows you to upload files with progress bar. It also comes with drag & drops functionality.
It is a simple but powerful plugin which easies to implement on any kind of website. You can upload the files into the server and the uploading progress bar will show into the page.
Furthermore, the Drag and Drop File Uploader plugin supports a wide range of file types. The site user’s can upload images, documents files, audio and video files. It allows you to set the validation like max file size and limit the file formats.
In addition, the users can see the preview after the file uploading finish. Due to its great features and options, it also supports all the latest web and mobile browsers.
Moreover, it works well with mobile, tablet and desktop devices. You can implement this plugin with any of the server-side platforms such as PHP, Smarty, larval, Java, Ruby on Rails and Google app engine, etc.
Mục lục bài viết
How to Create jQuery Multiple File Upload with Progress Bar
Basically, the plugin works with jQuery so you need to load the latest version of jQuery. Additional, you need to add the plugin minify version before the closing header tag.
The option thing is the bootstrap framework. If you already using this framework then don’t need to add both of it’s CSS and Javascript file.
Similar, if you don’t want to use the Bootstrap framework then don’t add these files but you need to write custom CSS for styling the buttons and progress bar etc.
<!-- jQuery --> <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <!-- Bootstrap CSS --> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'> <!-- Bootstrap JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <!-- blueimp Gallery script --> <script src="https://blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
The next thing you need to do is to add the plugin UI and CSS files into your HTML documents.
<!-- CSS to style the file input field as button and adjust the Bootstrap progress bars --> <link rel="stylesheet" href="css/jquery.fileupload.css" /> <link rel="stylesheet" href="css/jquery.fileupload-ui.css" />
After that, you need to add the Javascript file according to your file type requirements. For instance, if you only basic file upload functionality then simply add the jquery.fileupload.js
Similar, if you want the functionality of uploading the audio files then add jquery.fileupload-audio.js into your document.
<script src="js/jquery.iframe-transport.js"></script> <!-- The basic File Upload plugin --> <script src="js/jquery.fileupload.js"></script> <!-- The File Upload processing plugin --> <script src="js/jquery.fileupload-process.js"></script> <!-- The File Upload image preview & resize plugin --> <script src="js/jquery.fileupload-image.js"></script> <!-- The File Upload audio preview plugin --> <script src="js/jquery.fileupload-audio.js"></script> <!-- The File Upload video preview plugin --> <script src="js/jquery.fileupload-video.js"></script> <!-- The File Upload validation plugin --> <script src="js/jquery.fileupload-validate.js"></script> <!-- The File Upload user interface plugin --> <script src="js/jquery.fileupload-ui.js"></script>
Our next step to add the HTML markup. It includes the form, input type file and some buttons which allow to select the file, Cancel and Delete the file.
<form
id="fileupload"
action="https://jquery-file-upload.appspot.com/"
method="POST"
enctype="multipart/form-data"
>
<!-- Redirect browsers with JavaScript disabled to the origin page -->
<noscript
><input
type="hidden"
name="redirect"
value="https://blueimp.github.io/jQuery-File-Upload/"
/></noscript>
<!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
<div class="row fileupload-buttonbar">
<div class="col-lg-12" style="text-align:center;">
<!-- 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>
<span>Add files...</span>
<input type="file" name="files[]" multiple />
</span>
<button type="submit" class="btn btn-primary start">
<i class="glyphicon glyphicon-upload"></i>
<span>Start upload</span>
</button>
<button type="reset" class="btn btn-warning cancel">
<i class="glyphicon glyphicon-ban-circle"></i>
<span>Cancel upload</span>
</button>
<button type="button" class="btn btn-danger delete">
<i class="glyphicon glyphicon-trash"></i>
<span>Delete selected</span>
</button>
<input type="checkbox" class="toggle" />
<!-- The global file processing state -->
<span class="fileupload-process"></span>
</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>
<!-- The table listing the files available for upload/download -->
<table role="presentation" class="table table-striped">
<tbody class="files"></tbody>
</table>
</form>
The Javascript
The final and last step to activate the multiple file uploader application by adding the following x-tmpl script.
<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>
{% if (window.innerWidth > 480 || !o.options.loadImageFileTypes.test(file.type)) { %}
<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 (!o.options.autoUpload && o.options.edit && o.options.loadImageFileTypes.test(file.type)) { %}
<button class="btn btn-success edit" data-index="{%=i%}" disabled>
<i class="glyphicon glyphicon-edit"></i>
<span>Edit</span>
</button>
{% } %}
{% 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>
{% if (window.innerWidth > 480 || !file.thumbnailUrl) { %}
<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>
