How we can create a custom file upload input using HTML CSS JavaScript? Solution: See this JS Upload File Program With jQuery and CSS, Custom File Upload Input.
Previously I have shared many types of custom input programs, but this is about upload file input. Basically, The HTML <input type=”file”> tag defines a file-select field and a “Browse” button for upload files. All social networks use this tag, but they customize their input for better UI. We also can modify this input jQuery and CSS.
Today you will learn to create Custom File Upload Input. Basically, this program contains a blank input with a side button, when you will click that button then your file manager will open for choosing files. That actually happens, when we upload files on any online website. This is a basic file input but customized using jQuery and CSS.
So, Today I am sharing JS Upload File Program With jQuery and CSS. For creating this program I have used jQuery, as we know that is a JS library that’s why I am putting this in JavaScript category. The specialty of this program is, it can detect key in keyboard like backspace and enter and also these have actions. Pressing enter button you can browse file without clicking, and using backspaced you can remove the selected file.
If you are thinking now how this program actually is, then see the preview given below.
Preview Of JavaScript Custom File Input
See this video preview to getting an idea of how this program looks like.
Now you can see visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- HTML CSS FAQ Design With jQuery
- Dark / Light Mode Toggle With Clip-Path Animation
- JavaScript Random Password Generator
- Automatic Testimonial Slider
JS Upload File Program With jQuery and CSS Source Code
Before sharing source code, let’s talk about it. First I have placed the file input using HTML <input type="file"> tag inside a div. I have used a google font named lato, and in the HTML file, I have linked font and jquery CDN file (get). That’s a few works I have done in HTML file.
Using jQuery I have created div, file input, submit input, etc dynamically. There I have placed some keycode conditions, for backspace and enter key these have own condition you can check in the live demo. Now using CSS I have styled these elements, like color, size, hover color, etc. There are lots of basics kinds of stuff.
I can’t explain all in writing, you will understand easily after getting the codes. For creating this program you have create 3 files for that. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <!--Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>JS Upload File | Webdevtrick.com</title> <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Upload Your File</h1> <div class="jsFile-upload"> <input type="file" id="file" name="uploadFIle[]" multiple /> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ * { margin: 0; padding: 0; font-family: Lato, Arial; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body { color: #fff; padding: 55px 25px; background-color: #2a9fd1; } h1 { font-weight: normal; font-size: 40px; font-weight: normal; text-transform: uppercase; } .jsFile-upload-hidden { display: none; visibility: hidden; position: absolute; left: -9999px; } .jsFile-upload { display: block; width: auto; font-size: 16px; margin-top: 15px; } .jsFile-upload label { display: block; margin-bottom: 5px; } .wrapper { position: relative; margin-bottom: 5px; } .upload-input { width: 300px; color: #fff; font-size: 16px; padding: 11px 17px; border: none; background-color: #0077aa; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; float: left; } .upload-input:hover, .upload-input:focus { background-color: #0069aa; outline: none; } .upload-button { cursor: pointer; display: inline-block; color: #fff; font-size: 16px; text-transform: uppercase; padding: 11px 20px; border: none; margin-left: -1px; background-color: #044c6b; float: left; -moz-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .upload-button:hover { background-color: #002236; } |
function.js
The final step, Create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 |
// Code By Webdevtrick ( https://webdevtrick.com ) ;(function($) { var multipleSupport = typeof $('<input/>')[0].multiple !== 'undefined', isIE = /msie/i.test( navigator.userAgent ); $.fn.customFile = function() { return this.each(function() { var $file = $(this).addClass('jsFile-upload-hidden'), $wrap = $('<div class="wrapper">'), $input = $('<input type="text" class="upload-input" />'), $button = $('<button type="button" class="upload-button">Select a File</button>'), $label = $('<label class="upload-button" for="'+ $file[0].id +'">Select a File</label>'); $file.css({ position: 'absolute', left: '-9999px' }); $wrap.insertAfter( $file ) .append( $file, $input, ( isIE ? $label : $button ) ); $file.attr('tabIndex', -1); $button.attr('tabIndex', -1); $button.click(function () { $file.focus().click(); }); $file.change(function() { var files = [], fileArr, filename; if ( multipleSupport ) { fileArr = $file[0].files; for ( var i = 0, len = fileArr.length; i < len; i++ ) { files.push( fileArr[i].name ); } filename = files.join(', '); } else { filename = $file.val().split('\\').pop(); } $input.val( filename ) .attr('title', filename) .focus(); }); $input.on({ blur: function() { $file.trigger('blur'); }, keydown: function( e ) { if ( e.which === 13 ) { if ( !isIE ) { $file.trigger('click'); } } else if ( e.which === 8 || e.which === 46 ) { $file.replaceWith( $file = $file.clone( true ) ); $file.trigger('change'); $input.val(''); } else if ( e.which === 9 ){ return; } else { return false; } } }); }); }; if ( !multipleSupport ) { $( document ).on('change', 'input.customfile', function() { var $this = $(this), uniqId = 'customfile_'+ (new Date()).getTime(), $wrap = $this.parent(), $inputs = $wrap.siblings().find('.upload-input') .filter(function(){ return !this.value }), $file = $('<input type="file" id="'+ uniqId +'" name="'+ $this.attr('name') +'"/>'); setTimeout(function() { if ( $this.val() ) { if ( !$inputs.length ) { $wrap.after( $file ); $file.customFile(); } } else { $inputs.parent().remove(); $wrap.appendTo( $wrap.parent() ); $wrap.find('input').focus(); } }, 1); }); } }(jQuery)); $('input[type=file]').customFile(); |
That’s It. Now you have successfully created JS Upload File Program With jQuery and CSS, Custom File Upload Input Design. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
your videos is much useful for me. thank you so much sir……..
JavaScript Kaise Rang Karte Hain
JavaScript Kaise Run Karte Hain