Question

我正在建立网络应用聊天，并在上面建立上传系统，首先，我制作一张图片*a 然后是一个记录按钮**a

示例：

无论如何，我正在使用input[type="file"]

查看文件

示例：

[upload as wav]

但是我需要的是自动检测文件类型并根据其类型创建元素？

更新：

示例：

if(condition)

我知道如何获取文件类型，但是我需要将文件类型传递给脚本，它将返回预览元素，例如img表示照片，iframe表示PDF，音频表示音频，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')); }

这可能吗？在此先感谢:)

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()，则处理程序很复杂。

switch语句对表达式进行求值，将表达式的值与case子句匹配，并执行与该个案相关的语句，以及在匹配个案之后的个案。

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

希望有帮助。

Answer 2

假设用户一次只能上传一个文件，则可以从输入[type = file] filelist中获取document.getElementById("Id of the input").files[0]。它返回一个具有type属性的文件对象。希望这会有所帮助

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

更新：

2 个答案: