Javascript DOM HTML Input FileUpload files Property

Introduction

Select one or more files with the file upload button, and display some information about the selected file(s):

Use the Control or the Shift key to select multiple files.

View in separate window 

<!DOCTYPE html>
<html>
<body onload="myFunction()">

<input type="file" id="myFile" multiple size="50" onchange="myFunction()">

<p id="demo"></p>

<script>
function myFunction(){/*from  w  ww .j av a  2s.  com*/
  var x = document.getElementById("myFile");
  var txt = "";
  if ('files' in x) {
    if (x.files.length == 0) {
      txt = "Select one or more files.";
    } else {
      for (var i = 0; i < x.files.length; i++) {
        txt += "<br><strong>" + (i+1) + ". file</strong><br>";
        var file = x.files[i];
        if ('name' in file) {
          txt += "name: " + file.name + "<br>";
        }
        if ('size' in file) {
          txt += "size: " + file.size + " bytes <br>";
        }
      }
    }
  }
  else {
    if (x.value == "") {
      txt += "Select one or more files.";
    } else {
      txt += "The files property is not supported by your browser!";
      txt  += "<br>The path of the selected file: " + x.value; 
    }
  }
  document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>

The files property returns a FileList object, representing the file or files selected.

Via the FileList object we can get the the name, size and the contents of the files.

This property is read-only.

Return Value: A FileList object that represents the selected file or files



PreviousNext

Related