File Input jQuery
Change default input[type="file"] to custom:
.wrap {
margin: 150px auto 0 auto;
width: 500px;
background: #70b6e5;
color:#fff;
padding: 2% 3% 1% 3%;
/* Border radius */
-o-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* Make padding go inside the element, instead of expanding */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.wrap h1 {
font-size: 1.05em;
font-weight: bold;
border-bottom: 1px solid #fff; /* Fallback */
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
padding-bottom: 3px;
}
/* Container for 2 child elements (button & filename) */
.fileUpload {
background: #fff;
border: 0;
display: block;
margin: 2% 0 5% 0;
width: 100%;
/* border radius */
-o-border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
}
/* The button */
.fileUpload .fileBtn {
background: #2C88D6;
cursor: pointer;
float: left;
font-size: 1em;
font-weight: bold;
padding: 3% 0;
text-align: center;
width: 33%;
/* border radius */
-o-border-radius: 6px 0 0 6px;
-moz-border-radius: 6px 0 0 6px;
-webkit-border-radius: 6px 0 0 6px;
border-radius: 6px 0 0 6px;
}
.fileUpload .fileBtn:hover {
background: #2C4356;
}
/* Where the input-name will be filled in */
.fileUpload .fileName {
float: right;
overflow: hidden;
white-space: nowrap;
width: 67%;
text-align: center;
color: #000;
padding: 3% 0;
}
/* Animation (hover) */
.fileUpload .fileBtn:hover {
-webkit-transition-property: background;
-webkit-transition-duration: 0.4s;
-webkit-transition-timing-function: ease-in;
-moz-transition-property: background;
-moz-transition-duration: 0.4s;
-moz-transition-timing-function: ease-in;
-o-transition-property: background;
-o-transition-duration: 0.4s;
-o-transition-timing-function: ease-in;
-ms-transition-property: background;
-ms-transition-duration: 0.4s;
-ms-transition-timing-function: ease-in;
transition-property: background;
transition-duration: 0.4s;
transition-timing-function: ease-in;
}
/* Clear input-parent, due to child-floats */
.fileUpload:after {
clear: both;
content: " ";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
}
// Function to replace inputs
function fileInput(fi_container_class, fi_button_class, fi_filename_class, fi_button_text) {
// Arguments
fi_container_class = fi_container_class || 'fileUpload'; // Classname of the wrapper that contains the button & filename.
fi_button_class = fi_button_class || 'fileBtn'; // Classname for the button
fi_filename_class = fi_filename_class || 'fileName'; // Name of the text element's class
fi_button_text = fi_button_text || 'Download...'; // Text inside the button
// Variables
var fi_file = $('input[type=file]'); // Type of input to look for
// Hide file inputs
fi_file.css('display', 'none');
// String to append
var fi_str = '';
// Append "fake input" after the original input (which have been hidden)
fi_file.after(fi_str);
// Count amount of inputs
var fi_count = fi_file.length;
// Loop while "count" is greater than or equal to "i".
for (var i = 1; i <= fi_count; i++) {
// Get original input-name
var fi_file_name = fi_file.eq(i-1).attr('name');
// Assign the name to the equivalent "fake input".
$('.'+fi_container_class).eq(i-1).attr('data-name', fi_file_name);
}
// Button: action
$('.'+fi_button_class).on('click', function() {
// Get the name of the clicked "fake-input"
var fi_active_input = $(this).parent().data('name');
// Trigger "real input" with the equivalent input-name
$('input[name='+fi_active_input+']').trigger('click');
});
// When the value of input changes
fi_file.on('change', function() {
// Variables
var fi_file_name = $(this).val(); // Get the name and path of the chosen file
var fi_real_name = $(this).attr('name'); // Get the name of changed input
// Remove path from file-name
var fi_array = fi_file_name.split('\\'); // Split on backslash (and escape it)
var fi_last_row = fi_array.length - 1; // Deduct 1 due to 0-based index
fi_file_name = fi_array[fi_last_row]; //
// Loop through each "fake input container"
$('.'+fi_container_class).each(function() {
// Name of "this" fake-input
var fi_fake_name = $(this).data('name');
// If changed "fake button" is equal to the changed input-name
if(fi_real_name == fi_fake_name) {
// Add chosen file-name to the "fake input's label"
$('.'+fi_container_class+'[data-name='+fi_real_name+'] .'+fi_filename_class).html(fi_file_name);
}
});
});
}
$(document).ready(function() {
fileInput();
});