сделать предварительный просмотр элемента по типу файла, например [img, video, audio]

Question

Я создаю чат с веб-приложением и создаю на нем систему загрузки, сначала я создаю изображение input[type="file"], затем кнопку записи [upload as wav]

пример:

В любом случае я просматриваю файлы с if(condition),

пример:

         if (data.file == 'audio') {
            $('<audio style="display:block;width:250px;" controls src="' + data.message + '"></audio>').appendTo($('.messages ul'));
        }else if (data.file == 'image'){
            $(''<img class="imageChat"   ' +
                'src="' + filterXSS(data.message) + '"' +
                'href="' + filterXSS(data.message) + '"' + '>'
                +).appendTo($('.messages ul'));

        }

, но мне нужно АВТОопределить тип файла и создать элемент на основе его типа?

Обновление:

пример:

showFile('assets/this-is-img.php?a=b') // will return an $('img') element 

Я знаю, как получить тип файла, но янужно передать тип файла в сценарий, и он вернет элемент предварительного просмотра, например, img для фотографий, iframe для PDF, аудио для аудио, etc

это возможно?заранее спасибо :)

Answer 1

Вот очень простой пример.Основной функцией здесь является makeElement(), она берет некоторые базовые данные, переданные ему как объект, и создает объект jQuery на основе элемента HTML.

Тяжелая работа выполняется с помощью fileToElem(), который требует некоторой информациио файлах и может в зависимости от типа файла предпринять некоторые условные действия.Если он видит определенный файл и имеет шаблон данных для него.

$(function() {
  var files = [{
      file: "audio",
      message: "assets/this-is-img.php?a=b"
    },
    {
      file: "image",
      message: "assets/this-is-img.php?a=b"
    }
  ];

  function makeElement(d, t) {
    var el = $("<" + d.nodeName + ">", d.attr).prop(d.prop);
    if (t != undefined) {
      el.appendTo(t);
    }
    return el;
  }

  function fileToElem(data, target) {
    var item;
    switch (data.file) {
      case "audio":
        item = makeElement({
          nodeName: "audio",
          attr: {
            class: "audioChat",
            style: "display:block;width:250px;",
            src: data.message
          },
          prop: {
            controls: true
          }
        }, target);
        break;
      case "image":
        item = makeElement({
          nodeName: "img",
          attr: {
            class: "imageChat",
            src: data.message
          },
          prop: {}
        }, target);
        break;
      case "video":
        item = makeElement({
          nodeName: "video",
          attr: {
            class: "videoChat",
            src: data.message
          },
          prop: {
            controls: true
          }
        }, target);
        break;
      case "pdf":
        item = makeElement({
          nodeName: "a",
          attr: {
            class: "pdfChat",
            href: data.message,
            target: "_BLANK"
          },
          prop: {}
        }, target);
        break;
    }
    // Do other things with 'item' if needed here
  }

  $.each(files, function(i, data) {
    var listItem = $("<li>").data("date", new Date().toString()).appendTo($(".messages ul"));
    fileToElem(data, listItem);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="messages">
  <ul></ul>
</div>

Вы можете продолжать добавлять дополнительные условия к switch() в зависимости от ожидаемых типов файлов.Если вы не знакомы с switch(), это сложный обработчик if.

Оператор switch вычисляет выражение, сопоставляя значение выражения с предложением case, и выполняет операторы, связанные сэтот случай, а также заявления в случаях, которые следуют за соответствующим регистром.

См. подробнее: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

Надеюсь, что поможет.

Answer 2

Предполагая, что пользователь может загружать только один файл за раз, вы можете получить filelist из ввода [type = file] document.getElementById("Id of the input").files[0]. Возвращает объект файла, который имеет свойство типа. Надеюсь, это поможет