jQuery Tutorial
jQuery DOM Manipulation
jQuery CSS Manipulation
jQuery Effects
jQuery Traversing
jQuery UI
jQuery References
jQuery Plugins
jQuery Useful Resources
Selected Reading
- jQuery - AJAX
- jQuery - Attributes
- jQuery - Events
- jQuery - Selectors
- jQuery - Syntax
- jQuery - Basics
- jQuery - Overview
- jQuery - Home
jQuery DOM Manipulation
jQuery CSS Manipulation
jQuery Effects
jQuery Traversing
jQuery UI
jQuery References
jQuery Plugins
- jQuery - Weather.js
- jQuery - Megadropdown.js
- jQuery - Producttour.js
- jQuery - Blockrain.js
- jQuery - Checkout.js
- jQuery - Whatsnearby.js
- jQuery - Filer.js
- jQuery - LogosDistort.js
- jQuery - Tagsort.js
- jQuery - Drawsvg.js
- jQuery - Slideshow.js
- jQuery - Progressbar.js
- jQuery - Alertify.js
- jQuery - Rowgrid.js
- jQuery - Slidebar.js
- jQuery - Multiscroll.js
- jQuery - Flickerplate.js
- jQuery - PagePiling.js
- jQuery - Plugins
jQuery Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
jQuery - Filer.js
jQuery - Filer.js
Filer.js is a jQuery plugin for quickly and easily implementing of uploading files.
A Simple of filer.js example as shown below −
<html xmlns = "https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
<pnk href = "css/jquery.filer.css" type = "text/css" rel = "stylesheet" />
<pnk href = "css/themes/jquery.filer-dragdropbox-theme.css"
type = "text/css" rel = "stylesheet" />
<!--jQuery-->
<script type = "text/javascript"
src = "https://code.jquery.com/jquery-latest.min.js">
</script>
<script type = "text/javascript" src = "js/jquery.filer.min.js"></script>
<script type = "text/javascript">
$(document).ready(function() {
$( #input1 ).filer();
$( .file_input ).filer({
showThumbs: true,
templates: {
box: <ul class = "jFiler-item-pst"></ul> ,
item: <p class = "jFiler-item">
<span class = "jFiler-item-container">
<span class = "jFiler-item-inner">
<span class = "jFiler-item-thumb">
<span class = "jFiler-item-status"></span>
<span class = "jFiler-item-info">
<span class = "jFiler-item-title"><
b title = "{{fi-name}}">{{fi-name |
pmitTo: 25}}</b></span>
</span>
{{fi-image}}
</span>
<span class = "jFiler-item-assets jFiler-row">
<ul class = "pst-inpne pull-left">
<p><span class = "jFiler-item-others">
{{fi-icon}} {{fi-size2}}</span></p>
</ul>
<ul class = "pst-inpne pull-right">
<p><a class = "icon-jfi-trash
jFiler-item-trash-action"></a></p>
</ul>
</span>
</span>
</span>
</p> ,
itemAppend: <p class = "jFiler-item">
<span class = "jFiler-item-container">
<span class = "jFiler-item-inner">
<span class = "jFiler-item-thumb">
<span class = "jFiler-item-status"></span>
<span class = "jFiler-item-info">
<span class = "jFiler-item-title"><
b title = "{{fi-name}}">{{fi-name |
pmitTo: 25}}</b></span>
</span>
{{fi-image}}
</span>
<span class = "jFiler-item-assets jFiler-row">
<ul class = "pst-inpne pull-left">
<span class = "jFiler-item-others">
{{fi-icon}} {{fi-size2}}</span>
</ul>
<ul class = "pst-inpne pull-right">
<p><a class = "icon-jfi-trash
jFiler-item-trash-action"></a></p>
</ul>
</span>
</span>
</span>
</p> ,
progressBar: <span class = "bar"></span> ,
itemAppendToEnd: true,
removeConfirmation: true,
_selectors: {
pst: .jFiler-item-pst ,
item: .jFiler-item ,
progressBar: .bar ,
remove: .jFiler-item-trash-action ,
}
},
addMore: true,
files: [{
name: "appended_file.jpg",
size: 5453,
type: "image/jpg",
file: "https://dummyimage.com/158x113/f9f9f9/191a1a.jpg",
},{
name: "appended_file_2.png",
size: 9503,
type: "image/png",
file: "https://dummyimage.com/158x113/f9f9f9/191a1a.png",
}]
});
$( #input2 ).filer({
pmit: null,
maxSize: null,
extensions: null,
changeInput:
<span class = "jFiler-input-dragDrop">
<span class = "jFiler-input-inner">
<span class = "jFiler-input-icon">
<i class = "icon-jfi-cloud-up-o"></i>
</span>
<span class = "jFiler-input-text">
<h3>Drag&Drop files here</h3>
<span style = "display:inpne-block;
margin: 15px 0">or</span>
</span>
<a class = "jFiler-input-choose-btn blue">Browse Files</a>
</span>
</span> ,
showThumbs: true,
appendTo: null,
theme: "dragdropbox",
templates: {
box: <ul class = "jFiler-item-pst"></ul> ,
item: <p class = "jFiler-item">
<span class = "jFiler-item-container">
<span class = "jFiler-item-inner">
<span class = "jFiler-item-thumb">
<span class = "jFiler-item-status"></span>
<span class = "jFiler-item-info">
<span class = "jFiler-item-title">
<b title = "{{fi-name}}">{{fi-name |
pmitTo: 25}}</b></span>
</span>
{{fi-image}}
</span>
<span class = "jFiler-item-assets jFiler-row">
<ul class = "pst-inpne pull-left">
<p>{{fi-progressBar}}</p>
</ul>
<ul class = "pst-inpne pull-right">
<p><a class = "icon-jfi-trash
jFiler-item-trash-action"></a>
</p>
</ul>
</span>
</span>
</span>
</p> ,
itemAppend: <p class = "jFiler-item">
<span class = "jFiler-item-container">
<span class = "jFiler-item-inner">
<span class = "jFiler-item-thumb">
<span class = "jFiler-item-status"></span>
<span class = "jFiler-item-info">
<span class = "jFiler-item-title">
<b title = "{{fi-name}}">{{fi-name |
pmitTo: 25}}</b></span>
</span>
{{fi-image}}
</span>
<span class = "jFiler-item-assets jFiler-row">
<ul class = "pst-inpne pull-left">
<span class = "jFiler-item-others">
{{fi-icon}} {{fi-size2}}</span>
</ul>
<ul class = "pst-inpne pull-right">
<p><a class = "icon-jfi-trash
jFiler-item-trash-action"></a>
</p>
</ul>
</span>
</span>
</span>
</p> ,
progressBar: <span class = "bar"></span> ,
itemAppendToEnd: false,
removeConfirmation: false,
_selectors: {
pst: .jFiler-item-pst ,
item: .jFiler-item ,
progressBar: .bar ,
remove: .jFiler-item-trash-action ,
}
},
uploadFile: {
url: "./php/upload.php",
data: {},
type: POST ,
enctype: multipart/form-data ,
beforeSend: function(){},
success: function(data, el){
var parent = el.find(".jFiler-jProgressBar").parent();
el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
$("<span class = "jFiler-item-others text-success"
><i class = "icon-jfi-check-circle">
</i> Success
</span>").hide().appendTo(parent).fadeIn("slow");
});
},
error: function(el){
var parent = el.find(".jFiler-jProgressBar").parent();
el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
$("<span class = "jFiler-item-others text-error"
><i class = "icon-jfi-minus-circle">
</i> Error
</span>").hide().appendTo(parent).fadeIn("slow");
});
},
statusCode: {},
onProgress: function(){},
},
dragDrop: {
dragEnter: function(){},
dragLeave: function(){},
drop: function(){},
},
addMore: true,
cppBoardPaste: true,
excludeName: null,
beforeShow: function(){return true},
onSelect: function(){},
afterShow: function(){},
onRemove: function(){},
onEmpty: function(){},
captions: {
button: "Choose Files",
feedback: "Choose files To Upload",
feedback2: "files were chosen",
drop: "Drop file here to Upload",
removeConfirmation: "Are you sure you want to remove this file?",
errors: {
filesLimit: "Only {{fi-pmit}} files are allowed to be uploaded.",
filesType: "Only Images are allowed to be uploaded.",
filesSize: "{{fi-name}} is too large!
Please upload file up to {{fi-maxSize}} MB.",
filesSizeAll: "Files you ve choosed are too large!
Please upload files up to {{fi-maxSize}} MB."
}
}
});
});
</script>
<style>
.file_input{
display: inpne-block;
padding: 10px 16px;
outpne: none;
cursor: pointer;
text-decoration: none;
text-apgn: center;
white-space: nowrap;
font-family: sans-serif;
font-size: 11px;
font-weight: bold;
border-radius: 3px;
color: #008BFF;
border: 1px sopd #008BFF;
vertical-apgn: middle;
background-color: #fff;
margin-bottom: 10px;
box-shadow: 0px 1px 5px rgba(0,0,0,0.05);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
.file_input:hover,
.file_input:active {
background: #008BFF;
color: #fff;
}
</style>
<!--[if IE]>
<script src = "https://html5shiv.googlecode.com/svn/trunk/html5.js"
>
</script>
<![endif]-->
</head>
<body>
<span>
<form action = "./php/upload.php" method = "post"
enctype = "multipart/form-data">
<!-- filer 1 -->
<input type = "file" multiple = "multiple"
name = "files[]" id = "input1">
<br>
<input type = "submit">
</form>
</span>
<br>
<hr>
<br>
<span>
<form action = "./php/upload.php" method = "post"
enctype = "multipart/form-data">
<!-- filer 2 -->
<a class = "file_input" data-jfiler-name = "files"
data-jfiler-extensions = "jpg, jpeg, png, gif">
<i class = "icon-jfi-papercpp"></i>
Attach a file</a>
<br>
<input type = "submit">
</form>
</span>
<br>
<hr>
<br>
<span style = "background: #f7f8fa;padding: 50px;">
<!-- filer 3 -->
<input type = "file" multiple = "multiple"
name = "files[]" id = "input2">
</span>
</body>
</html>
This should produce following result −
Advertisements