gocha · July 7, 2021 02:34
diff --git a/file-example.html b/file-example.html
 <!--
  Removed ES2015 syntaxes for Internet Explorer 11: https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html
  <input type="file"> - HTML: HyperText Markup Language | MDN https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
 -->
 <!DOCTYPE html>
 <html>
 <head>
  <title>Complete file example</title>
  <style>
    html {
      font-family: sans-serif;
    }

    form {
      width: 600px;
      background: #ccc;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid black;
    }

    form ol {
      padding-left: 0;
    }

    form li, div > p {
      background: #eee;
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      list-style-type: none;
      border: 1px solid black;
    }

    form img {
      height: 64px;
      order: 1;
    }

    form p {
      line-height: 32px;
      padding-left: 10px;
    }

    form label, form button {
      background-color: #7F9CCB;
      padding: 5px 10px;
      border-radius: 5px;
      border: 1px ridge black;
      font-size: 0.8rem;
      height: auto;
    }

    form label:hover, form button:hover {
      background-color: #2D5BA3;
      color: white;
    }

    form label:active, form button:active {
      background-color: #0D3F8F;
      color: white;
    }
  </style>
 </head>
 <body>
  <form>
    <div>
      <label for="image_uploads">Choose images to upload (PNG, JPG)</label>
      <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple>
    </div>
    <div class="preview">
      <p>No files currently selected for upload</p>
    </div>
    <div>
      <button>Submit</button>
    </div>
  </form>
  <script>
    var input = document.querySelector('input');
    var preview = document.querySelector('.preview');

    input.style.opacity = 0;

    input.addEventListener('change', updateImageDisplay);

    function updateImageDisplay() {
      while(preview.firstChild) {
        preview.removeChild(preview.firstChild);
      }

      var curFiles = input.files;
      if(curFiles.length === 0) {
        var para = document.createElement('p');
        para.textContent = 'No files currently selected for upload';
        preview.appendChild(para);
      } else {
        var list = document.createElement('ol');
        preview.appendChild(list);

        for(var fileIndex = 0; fileIndex < curFiles.length; fileIndex++) {
          var file = curFiles[fileIndex];
          var listItem = document.createElement('li');
          var para = document.createElement('p');

          if(validFileType(file)) {
            para.textContent = 'File name ' + file.name + ', file size ' + returnFileSize(file.size) + '.';
            var image = document.createElement('img');
            image.src = URL.createObjectURL(file);

            listItem.appendChild(image);
            listItem.appendChild(para);
          } else {
            para.textContent = 'File name ' + file.name + ': Not a valid file type. Update your selection.';
            listItem.appendChild(para);
          }

          list.appendChild(listItem);
        }
      }
    }

 // https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
    var fileTypes = [
        'image/apng',
        'image/bmp',
        'image/gif',
        'image/jpeg',
        'image/pjpeg',
        'image/png',
        'image/svg+xml',
        'image/tiff',
        'image/webp',
        'image/x-icon'
    ];

    function validFileType(file) {
      return fileTypes.indexOf(file.type) >= 0;
    }

    function returnFileSize(number) {
      if(number < 1024) {
        return number + 'bytes';
      } else if(number > 1024 && number < 1048576) {
        return (number/1024).toFixed(1) + 'KB';
      } else if(number > 1048576) {
        return (number/1048576).toFixed(1) + 'MB';
      }
    }
  </script>
 </body>
 </html>
	<!--
	Removed ES2015 syntaxes for Internet Explorer 11: https://mdn.github.io/learning-area/html/forms/file-examples/file-example.html
	<input type="file"> - HTML: HyperText Markup Language \| MDN https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file
	-->
	<!DOCTYPE html>
	<html>
	<head>
	<title>Complete file example</title>
	<style>
	html {
	font-family: sans-serif;
	}

	form {
	width: 600px;
	background: #ccc;
	margin: 0 auto;
	padding: 20px;
	border: 1px solid black;
	}

	form ol {
	padding-left: 0;
	}

	form li, div > p {
	background: #eee;
	display: flex;
	justify-content: space-between;
	margin-bottom: 10px;
	list-style-type: none;
	border: 1px solid black;
	}

	form img {
	height: 64px;
	order: 1;
	}

	form p {
	line-height: 32px;
	padding-left: 10px;
	}

	form label, form button {
	background-color: #7F9CCB;
	padding: 5px 10px;
	border-radius: 5px;
	border: 1px ridge black;
	font-size: 0.8rem;
	height: auto;
	}

	form label:hover, form button:hover {
	background-color: #2D5BA3;
	color: white;
	}

	form label:active, form button:active {
	background-color: #0D3F8F;
	color: white;
	}
	</style>
	</head>
	<body>
	<form>
	<div>
	<label for="image_uploads">Choose images to upload (PNG, JPG)</label>
	<input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple>
	</div>
	<div class="preview">
	<p>No files currently selected for upload</p>
	</div>
	<div>
	<button>Submit</button>
	</div>
	</form>
	<script>
	var input = document.querySelector('input');
	var preview = document.querySelector('.preview');

	input.style.opacity = 0;

	input.addEventListener('change', updateImageDisplay);

	function updateImageDisplay() {
	while(preview.firstChild) {
	preview.removeChild(preview.firstChild);
	}

	var curFiles = input.files;
	if(curFiles.length === 0) {
	var para = document.createElement('p');
	para.textContent = 'No files currently selected for upload';
	preview.appendChild(para);
	} else {
	var list = document.createElement('ol');
	preview.appendChild(list);

	for(var fileIndex = 0; fileIndex < curFiles.length; fileIndex++) {
	var file = curFiles[fileIndex];
	var listItem = document.createElement('li');
	var para = document.createElement('p');

	if(validFileType(file)) {
	para.textContent = 'File name ' + file.name + ', file size ' + returnFileSize(file.size) + '.';
	var image = document.createElement('img');
	image.src = URL.createObjectURL(file);

	listItem.appendChild(image);
	listItem.appendChild(para);
	} else {
	para.textContent = 'File name ' + file.name + ': Not a valid file type. Update your selection.';
	listItem.appendChild(para);
	}

	list.appendChild(listItem);
	}
	}
	}

	// https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
	var fileTypes = [
	'image/apng',
	'image/bmp',
	'image/gif',
	'image/jpeg',
	'image/pjpeg',
	'image/png',
	'image/svg+xml',
	'image/tiff',
	'image/webp',
	'image/x-icon'
	];

	function validFileType(file) {
	return fileTypes.indexOf(file.type) >= 0;
	}

	function returnFileSize(number) {
	if(number < 1024) {
	return number + 'bytes';
	} else if(number > 1024 && number < 1048576) {
	return (number/1024).toFixed(1) + 'KB';
	} else if(number > 1048576) {
	return (number/1048576).toFixed(1) + 'MB';
	}
	}
	</script>
	</body>
	</html>