Menu
I have styled a file input using CSS:
.custom-file-upload { border: 1px solid #ccc; display: inline-block; padding: 6px 12px; cursor: pointer; }<form> <label for="file-upload" class="custom-file-upload"> <i class="fa fa-cloud-upload"></i> Upload Image </label> <input id="file-upload" name='upload_cont_img' type="file" style="display:none;"> </form> Everything is working fine, but I’d like to display the selected file name. How is this possible using CSS or jQuery?
298
length property in jQuery to check the file is selected or not. If element. files. length property returns 0 then the file is not selected otherwise file is selected.
A file input's value attribute contains a string that represents the path to the selected file(s). If no file is selected yet, the value is an empty string ( "" ). When the user selected multiple files, the value represents the first file in the list of files they selected.
You have to bind and trigger the change event on the [type=file] element and read the files name as:
$('#file-upload').change(function() { var i = $(this).prev('label').clone(); var file = $('#file-upload')[0].files[0].name; $(this).prev('label').text(file); });.custom-file-upload { border: 1px solid #ccc; display: inline-block; padding: 6px 12px; cursor: pointer; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <label for="file-upload" class="custom-file-upload"> <i class="fa fa-cloud-upload"></i> Upload Image </label> <input id="file-upload" name='upload_cont_img' type="file" style="display:none;"> </form>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
