Show file info after input of type=file chosen

Posted on 2012-08-18
Last Modified: 2012-08-19
I have this input in my form:

<label for="file">Choose file to upload:</label>
<input type="file" name="file" id="file" />

Open in new window

Assume I have a div of id="fileinfo" below it.

After the file has been chosen,  I would like to show the file name, type, and size in the <div id="fileinfo"> (before the form is submitted).

How could I do that? Thanks!
Question by:christamcc
    LVL 49

    Accepted Solution

    Not possible - you don't have access to all that information.

    You can get the contents of the <input type="file"> control using javascript and you can get the type by stripping off the extension but you can't get the size.

    Here is some code that will show you how to get the file name information onsubmit

    <!doctype html>
    <script src=""></script>
    <script type="text/javascript">
    $(function() {
      $('form').submit(function() {
        if ($('#files').val() == '') {
          alert('Please enter a file to upload');
          return false;
        else {  // Get the extension to figure out type
    <input type="file" id="files" />
    <input type="submit" />

    Open in new window

    LVL 82

    Expert Comment

    by:Dave Baldwin
    Javascript is not allowed access to the local file system.  That was blocked years ago because it was being used to hack into people's systems.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Javascript: Crash Course

    Javascript is not only emerging as the most important language to know, it's flexibility is unique. With Javascript being deployed on the web, mobile and even the desktop this is the one language that all technologists need to know.

    Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
    Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    759 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now