Customize Input File using jQuery/CSS

Submitted by: 
Language: 
Visitors have accessed this post 404 times.

This tutorial will teach you on how to customize input file using jQuery and CSS.

Note: Scripts and css used in this tutorial are hosted, therefore, you need internet connection for them to work.

Hiding our Input File

First step is to hide our input file. It will look something like this.

  1. <input type="file" name="file" id="file" style="display:none;" multiple>

Creating a Substitute Button

Next we create a substitute button and will set a jQuery function that whenever this button is clicked, our input file will be clicked. It will look something like this.

  1. <button type="button" class="button" id="filebutton"><i class="fa fa-upload"></i><span id="filetext">Select File</span></button>

Creating our Example

Here's an example for you to further understand the topic.

index.html

We create our input file, substitute button, our css and source to our jQuery code in this page.

  1. <!DOCTYPE html>
  2. <title>Customize Input File using jQuery/CSS</title>
  3. <script src="<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  4. " rel="nofollow">https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></scri...</a> <link href="<a href="https://fonts.googleapis.com/css?family=Open+Sans"" rel="nofollow">https://fonts.googleapis.com/css?family=Open+Sans"</a> rel="stylesheet">
  5. <link href="<a href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"" rel="nofollow">https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min....</a> rel="stylesheet">
  6. body{
  7. font-family: 'Open Sans', sans-serif;
  8. }
  9. .button {
  10. background-color: #4CAF50;
  11. border: none;
  12. color: white;
  13. padding: 16px 32px;
  14. text-align: center;
  15. text-decoration: none;
  16. font-size: 16px;
  17. margin: 4px 2px;
  18. cursor:pointer;
  19. font-family: 'Open Sans', sans-serif;
  20. }
  21. .hidden{
  22. display:none;
  23. }
  24. .h10{
  25. height:10px;
  26. }
  27. #filetext{
  28. margin-left:10px;
  29. }
  30. .title{
  31. font-size:25px;
  32. }
  33. .container {
  34. margin : 50px auto 0 auto;
  35. width:50%;
  36. }
  37. #filebutton{
  38. margin : 150px auto 0 auto;
  39. }
  40. </style>
  41. </head>
  42. <div id="container">
  43. <div class="container">
  44. <span class="title"><strong><center>Customize Input File</center></strong></span>
  45. <span class="subtitle"><center>by <a href="<a href="https://www.sourcecodester.com/user/224918/track">nurhodelta_17</a></center></span>
  46. ">https://www.sourcecodester.com/user/224918/track">nurhodelta_17</a></cen...</a> <div class="h10"></div>
  47. <input type="file" name="file" id="file" class="hidden" multiple>
  48. <center><button type="button" class="button" id="filebutton"><i class="fa fa-upload"></i><span id="filetext">Select File</span></button></center>
  49. </div>
  50. </div>
  51. <script src="custom.js"></script>
  52. </body>
  53. </html>

custom.js

Lastly, our jQuery code.

  1. $(document).ready(function(){
  2. $('#filebutton').click(function(){
  3. $('#file').click();
  4. });
  5.  
  6. $('#file').change(function(){
  7. var name = $(this).val().split('\\').pop();
  8. var file = $(this)[0].files;
  9. if(name != ''){
  10. if(file.length >=2){
  11. $('#filetext').html(file.length + ' files ready to upload');
  12. }
  13. else{
  14. $('#filetext').html(name);
  15. }
  16. }
  17. });
  18. });

That ends this tutorial. If you have any comments or questions, feel free to write it below or message me. Happy Coding :)


Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.