Today ‘s topic we will show you how to get the selected file name from an input type file using jQuery. On a recent job, we were using a form where a user could add up to 3 images to upload to a contact form on CF7.
So how do we get the filename on a selection of a file? The answer is jQuery’s change() method.
You can use the jQuery’s change() method to get the file name selected by the HTML form control <input type=”file” />. Let’s see an example to understand how it works:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected File Name From Input File</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
$('input[type="file"]').change(function(e){
var fileName = e.target.files[0].name;
alert('The file "' + fileName + '" has been selected.');
});
});
</script>
</head>
<body>
<form>
<input type="file">
<p><strong>Note:</strong> Choose any file on your computer and its name will be displayed as an alert message.</p>
</form>
</body>
</html>
In our case scenario, we wanted to display the filename inside the file box, in which case we added the following to the HTML:-
<div class="icon-add-file"></div>
$('.filename').html(fileName);
// If you are using multiple file uploads, you will have to do some traversing, in our case we had to get the parent(x3) selector and find the .filename class:
$(this).parent().parent().parent().find('.filename').html(fileName);
Replacing the default file inputs
Here, we might have looked at the first screenshot and wondered how we replaced the default styling of the file input boxes. Don’t worry, we have you covered here as well.
.file-wrapper {
padding: 10px 20px;
border: solid 2px #F8F8F8;
background: #F8F8F8;
color: #818586;
max-width: 100%;
outline: none;
height: 150px;
width: 100%;
display: block;
}
div.wpcf7 input[type="file"] {
width: 100%;
height: 100%;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: 1;
left: 0;
top: 0;
}
.icon-add-file {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background-image: url(../img/icon-plus-symbol.png);
display: block;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
}
.file-wrapper .wpcf7-form-control-wrap {
position: relative;
width: 100%;
display: block;
top: 0;
left: 0;
height: 150px;
margin-top: -23px;
}
So what we did here was that we hid the original styling of the file input using opacity 0, we then added a background image which covers the grey input box so anywhere can be clicked to bring up the file upload window. In our example, we were using CF7 so the code may need to be amended to your project.
Popular Posts
- Show / Hide div based on dropdown selected using jQuery
- Autosuggestion Select Box using HTML5 Datalist, PHP and MySQL with Example
- Infinite Scrolling on PHP website using jQuery and Ajax with example
- How to Convert MySQL Data to JSON using PHP
- Custom Authentication Login And Registration Using Laravel 8
- Image Lazy loading Using Slick Slider
- Slick Slider Basic With Example
- Google Login or Sign In with Angular Application
- How to change date format in PHP?
- php in_array check for multiple values
- Adaptive Height In Slick Slider
- Slick Slider Center Mode With Example
- How to Scroll to an Element with Vue 3 and ?
- JavaScript Multiple File Upload Progress Bar Using Ajax With PHP
- Slick Slider Multiple Items With Example