• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 407
  • Last Modified:

Show file info after input of type=file chosen

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!
1 Solution
Julian HansenCommented:
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="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></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

Dave BaldwinFixer of ProblemsCommented:
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.

Featured Post

Prep for the ITIL® Foundation Certification Exam

December’s Course of the Month is now available! Enroll to learn ITIL® Foundation best practices for delivering IT services effectively and efficiently.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now