Jthe4th/LocalFilesPreviewAndInfo.html

## LocalFilesPreviewAndInfo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8 />
<title>Read multiple files' metadata and show image thumbnail</title>
<style>
  td, tr, th {
  border-bottom:1px solid #ccc;
  padding:8px;
  font-family: sans-serif;
  font-size:14px;
}
</style>
</head>
<body>
Select several images: <input type="file" accept="image/*" multiple onchange="filesProcess(this.files)" name="selection"/>
<p>
<div id="result">
  <table id="fileList"><tr><th>Thumbnail</th><th>Name</th><th>Bytes</th><th>MIME Type</th><th>Last modified date</th></tr>
  </table>
</div>

<script>
  var selection;
  function filesProcess(files) {
    var selection = "";

    for(i=0; i<files.length; i++){

      file = files[i];

      var reader = new FileReader();

      // Add an onload listener to the reader
      addOnLoadListener(reader, file, selection);

      reader.readAsDataURL(file);

      } //end of for loop

   } // end of filesProcess()

  function addOnLoadListener(reader, file, selection) {

        reader.onload = function(e) {
        selection += "<tr><td><img src='"+e.target.result+"' width=100></td><td>"+file.name+"</td><td style=\"text-align:right\">\r\n" +file.size+"</td><td>"+file.type+"</td><td> "+file.lastModifiedDate+"</td></tr>";

          //console.log("filesize = " + file.size);

          //Add rows to the table
          document.querySelector("#fileList").innerHTML += selection;
      }

  }

</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset=utf-8 />
	<title>Read multiple files' metadata and show image thumbnail</title>
	<style>
	td, tr, th {
	border-bottom:1px solid #ccc;
	padding:8px;
	font-family: sans-serif;
	font-size:14px;
	}
	</style>
	</head>
	<body>
	Select several images: <input type="file" accept="image/*" multiple onchange="filesProcess(this.files)" name="selection"/>
	<p>
	<div id="result">
	<table id="fileList"><tr><th>Thumbnail</th><th>Name</th><th>Bytes</th><th>MIME Type</th><th>Last modified date</th></tr>
	</table>
	</div>

	<script>
	var selection;
	function filesProcess(files) {
	var selection = "";

	for(i=0; i<files.length; i++){

	file = files[i];

	var reader = new FileReader();

	// Add an onload listener to the reader
	addOnLoadListener(reader, file, selection);

	reader.readAsDataURL(file);

	} //end of for loop

	} // end of filesProcess()

	function addOnLoadListener(reader, file, selection) {

	reader.onload = function(e) {
	selection += "<tr><td><img src='"+e.target.result+"' width=100></td><td>"+file.name+"</td><td style=\"text-align:right\">\r\n" +file.size+"</td><td>"+file.type+"</td><td> "+file.lastModifiedDate+"</td></tr>";

	//console.log("filesize = " + file.size);

	//Add rows to the table
	document.querySelector("#fileList").innerHTML += selection;
	}

	}

	</script>
	</body>
	</html>