javascript - 按文件类型进行元素预览，例如 [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、PDF 的 iframe、音频的音频，等

这可能吗？提前致谢:)

Answer 1

这是一个非常基本的例子。这里的核心函数是makeElement()，它将一些基本数据作为对象传递给它，并根据 HTML 元素创建一个 jQuery 对象。

繁重的工作由 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 处理程序。

The switch statement evaluates an expression, matching the expression's value to a case clause, and executes statements associated with that case, as well as statements in cases that follow the matching case.

查看更多:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/switch

希望对您有所帮助。