javascript - 按文件类型进行元素预览，例如 [img,video,audio]

问题描述

我正在构建一个网络应用程序聊天，并在其上制作了一个上传系统，首先我制作了一个图像，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、音频的音频，etc

这可能吗？提前致谢：）

标签： javascriptjqueryhtmlupload

解决方案

这是一个非常基本的例子。这里的核心功能是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 处理程序。

该switch语句计算表达式，将表达式的值与case子句匹配，并执行与该案例相关的语句，以及匹配案例后面的案例中的语句。

希望有帮助。

javascript - 按文件类型进行元素预览，例如 [img,video,audio]

问题描述

更新：

解决方案

推荐阅读