JSFiddle - React, Tailwind, and code Playground

by AJIEKCEU

HTML

<form method="post" enctype="multipart/form-data">
  <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></p>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>
<form action="handler.php">
  <fieldset>
   <legend>Работа со временем</legend>
     <input type="checkbox"> создание пунктуальности (никогда не 
      будете никуда опаздывать);<br>
     <input type="checkbox"> излечение от пунктуальности (никогда 
      никуда не будете торопиться);<br>
     <input type="checkbox"> изменение восприятия времени и часов.
      <p><input type="submit"></p>
  </fieldset>
 </form>

JavaScript

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 = 'Файлы для загрузки не выбраны';
    preview.appendChild(para);
  } else {
    var list = document.createElement('ol');
    preview.appendChild(list);
    for(var i = 0; i < curFiles.length; i++) {
      var listItem = document.createElement('li');
      var para = document.createElement('p');
      if(validFileType(curFiles[i])) {
        para.textContent = curFiles[i].name + ', размер ' + returnFileSize(curFiles[i].size) + '.';
         var image = document.createElement('img');
        image.src = window.URL.createObjectURL(curFiles[i]);

        listItem.appendChild(image);
        listItem.appendChild(para);
      } else {
        para.textContent = 'File name ' + curFiles[i].name + ': Недействительный тип файла. Обновите свой выбор.';
        listItem.appendChild(para);
      }

      list.appendChild(listItem);
    }
  }
}
var fileTypes = [
  'image/jpeg',
  'image/jpg',
  'image/png'
]

function validFileType(file) {
  for(var i = 0; i < fileTypes.length; i++) {
    if(file.type === fileTypes[i]) {
      return true;
    }
  }

  return false;
}

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';
  }
}