CODEWITHSUNDEEP
htmlformsjquery
Pablo Lopez
Pablo Lopez

Reputation: 761

How to get the filename before uploading in jquery?

I got it to work so it could show the image but i also want to show the file name but in the html form as the value. Is it possible to do that? 

<script>
     $(function () {
            $(".stickybox").stickySidebar({
                speed: 200
            });
          });
          function readURL(input) {
                if (input.files && input.files[0]) {
                    var reader = new FileReader();

                    reader.onload = function (e) {
                        $('#blah')
                            .attr('src', e.target.result)
                            .width(100)
                            .height(100);
                    };

                    reader.readAsDataURL(input.files[0]);
                }
            }
</script>
            <form action="" enctype="multipart/form-data" method="post">
     <center>
    <table>
    <img id="blah" src="#" alt="your image" />
    <tr><td>image</td><td><input type="file" onchange="readURL(this)"  name="image" /></td></tr>
    <tr><td>Name:</td><td><input name="name" value="" type="text"/></td></tr>
    <tr><td><input type="submit" value="upload"/></td></tr>
    </table></center>
    </form>

Upvotes: 2

Views: 4047

Answers (1)

Musa
Musa

Reputation: 97672

You can access the file name via the name property of the File object

$('input[name=name]').val(input.files[0].name)

https://developer.mozilla.org/en-US/docs/DOM/File

Upvotes: 3

Related Questions