Using a File Chooser Dialog

This example program demonstrates how to use a file choosing dialog to get information on a set of files in JavaScript.

FileChooser.html

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="FileChooser.js"></script>
  </head>
  <body onload="GetFileInfo()">
    <input type="file" id="idInputFile" multiple="multiple" size="60" onchange="GetFileInfo()" />
    <hr />
    <div id="idFileInfo" style="margin-top:30px"></div>
  </body>
</html>

FileChooser.js

function GetFileInfo() {
  var qFileInputElement = document.getElementById("idInputFile");
  var sFileInfo = "";
  // If the 'files' property is in the object
  if ('files' in qFileInputElement) {
    if (qFileInputElement.files.length == 0) {
      sFileInfo = "Please browse for one or more files.";
    } else {
      for (var i = 0; i < qFileInputElement.files.length; i++) {
        sFileInfo += "<br /><b>File #" + (i+1) + "</b><br />";
        var qFile = qFileInputElement.files[i];
        if ('name' in qFile) {
          sFileInfo += "name: " + qFile.name + "<br />";
        } else {
          sFileInfo += "name: " + qFile.fileName + "<br />";
        }
        if ('size' in qFile) {
          sFileInfo += "size: " + qFile.size + " bytes <br />";
        } else {
          sFileInfo += "size: " + qFile.fileSize + " bytes <br />";
        }
        if ('mediaType' in qFile) {
          sFileInfo += "type: " + qFile.mediaType + "<br />";
        }
      }
    }
  } else {
    if (qFileInputElement.value == "") {
      sFileInfo += "Please browse for one or more files.";
      sFileInfo += "<br />Use the Control or Shift key for multiple selection.";
    } else {
      sFileInfo += "Your browser doesn't support the files property!";
      sFileInfo += "<br />The path of the selected file: " + qFileInputElement.value;
    }
  }
  var info = document.getElementById("idFileInfo");
  info.innerHTML = sFileInfo;
}

Core JavaScript

Using a File Chooser Dialog

FileChooser.html

FileChooser.js

Output