Print file name from type=file button

Question

I'm using a regular button that onclick activates the type=file button and works properly, as in that it successfully opens the choose a file menu and then selects a file, but it doesnt say the name of the file anywhere. Is there a way to do this?

<div class="div-table" align="center">
    <form method="post" enctype="multipart/form-data" action="">
        <div class="div-table-row" align="center">
            <div class="div-table-col" align="right"> Upload Doc File:   </div> 
            <div class="div-table-col" align="left">
                <input type="button" id="my-button" value="Select Doc File" class="button" >
                <input type="file" name="file" id="file" src="#" onchange="getFilePath())">
            </div>
            <script> 
                $('#my-button').click(function(){
                    $('#file').click();
                });
            </script>
        </div>

Id just like to pop up and show the file name next to the button or something so the user knows that the files been selected. Thanks

What does getFilePath() do?

WillardSolutions
– WillardSolutions

2015-11-18 23:05:14 +00:00
Commented Nov 18, 2015 at 23:05 — WillardSolutions
– WillardSolutions, Commented Nov 18, 2015 at 23:05

Matt Komarnicki · Accepted Answer · 2015-11-18 23:10:21Z

1

If I understand correctly, you want to get the name of a file you picked for an upload before submitting the file?

$('input:file#avatar').change(function () {
    var file_name = $(this).val();
    if (file_name.length > 10) {
        file_name = file_name.substring(0, 10) + '...';
    }
});

file_name is what you need.

answered Nov 18, 2015 at 23:10

Matt Komarnicki

5,4728 gold badges51 silver badges101 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

StateraTv · Accepted Answer · 2015-11-18 23:22:36Z

0

Hi i've tried this code out - hope this helps

    <form action="" method="POST" type="multipart/form-data">
    <input type="file" name="file" id="filename" style="display:none;" onchange="getPath()">
    <input type="button" value="Upload File" onclick="openpath()">
</form>
<div id="display"></div>

<script>
var inputName = document.getElementById('filename');
var dis = document.getElementById('display');

function openpath(){
    inputName.click();
}

function getPath() {
     var imgPath;

     imgPath = inputName.value;
     imgPath = imgPath.replace("C:\\fakepath\\", "");
     dis.innerHTML = imgPath;

}

</script>

answered Nov 18, 2015 at 23:22

StateraTv

265 bronze badges

Comments

DoctorDestructo · Accepted Answer · 2015-11-18 23:51:27Z

0

If you want to add the filename after the button like an actual browse button does, you can do something like this (sorry, I don't jquery):

document.getElementById('file').addEventListener('change', function() {
  var fn = '<span>' + this.value.replace(/^.*?([^\\\/]*)$/, '$1') + '</span>';
  document.getElementById('my-button').insertAdjacentHTML('afterend', fn);
}, false);

edited Nov 18, 2015 at 23:51

answered Nov 18, 2015 at 23:31

DoctorDestructo

4,40231 silver badges44 bronze badges

Collectives™ on Stack Overflow

Print file name from type=file button

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related