jQuery provides a quick jQuery Filer uploader plugin for easy implementation of uploading the files. It provides features like instant uploading of files, file append, file removal, multiple selections, drag and drop support along with other file validations.
Please download the required files to include it in your working folder and include in the head section as shown in the following examples. The programmer can adjust all the file paths in his code as organized in the working folder.
Note: HTML input control ids are given as “filer_input” and “filer_input2” to match with plugin’s custom.js code.
Example 1: In the following example, basic file upload implementation is shown using jQuery.Filer plugin. Programmers can try out other features according to the project requirements.
HTML
<!DOCTYPE>
<html lang="html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Filer Plugin</title>
<link href=
rel="stylesheet">
<link href="jquery.filer.css"
rel="stylesheet">
<script src=
crossorigin="anonymous">
</script>
<script src="jquery.filer.min.js"
type="text/javascript">
</script>
<script src="custom.js"
type="text/javascript">
</script>
<style>
body {
font-family: sans-serif;
font-size: 14px;
line-height: 1.5;
color: #47505d;
background-color: #ffffff;
margin: 0;
padding: 18px;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksForGeeks
</h1>
<b>jQuery Filer Plugin</b>
<div id="content">
<form action="upload_form.php"
method="post"
enctype="multipart/form-data">
<input type="file"
name="files[]"
id="filer_input"
multiple="multiple">
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
|
jQuery code used in the above example: The below code custom.js file is provided by jQuery.Filer plugin.
Javascript
$(document).ready(function () {
$('#filer_input').filer({
showThumbs: true,
addMore: true,
allowDuplicates: false
});
});
|
Output:
Note: The uploaded file can be seen in the “uploads” folder according to the upload file path given by the programmer.
Example 2: In the following example, drag and drop feature is shown. Files selected are previewed in the bottom with success status.
HTML
<!DOCTYPE>
<html lang="html">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>jQuery Filer DragnDrop Images</title>
<link href=
rel="stylesheet">
<link href="jquery.filer.css" rel="stylesheet">
<link href=
"jquery.filer-dragdropbox-theme.css"
rel="stylesheet">
<script src=
crossorigin="anonymous">
</script>
<script src="jquery.filer.min.js"
type="text/javascript">
</script>
<script src="custom.js"
type="text/javascript">
</script>
<style>
body {
margin: 0;
text-align: center;
font-family: sans-serif;
font-size: 16px;
line-height: 1.5;
color: #47505d;
padding: 18px;
background-color: #ffffff;
margin: 0;
}
.jFiler {
font-family: inherit;
}
</style>
</head>
<body>
<h1 style="color:green">
GeeksForGeeks
</h1>
<b>jQuery Filer Plugin</b>
<div id="content">
<input type="file"
name="files[]" id="filer_input2"
multiple="multiple">
</div>
</body>
</html>
|
jQuery code used in the above example: The custom.js file is provided by the jQuery.Filer plugin.
Output:
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
12 Jul, 2023
Like Article
Save Article