如何创建 JavaScript 条件来显示视频的图像预览或图片的图像预览？

Question

关于图片预览，当我select一个视频时，视频图片预览的右侧显示一个空的图片框。而当我select一张图片的时候，图片图片预览的左侧会显示一个空的space。所以 <video> 标签和 <img> 标签一起显示。

这里是相关的HTML部分的代码，它在一个表单标签内：

<form  method="post" enctype="multipart/form-data">

  <label class="input-group-prepend" for="image_name">
    <i class="fa fa-camera" data-toggle="tooltip" title="Attach a photo or video"></i> 
    <video class="image_Preview"></video>
    <img class="image_Preview">
  </label>
  <input id="image_name" name="image_name" class="file" type="file" data-count="0" style="display: none;">

</form>

这里是相关的jQuery部分：

$(document).on('click change', '.file, .submit', function() {

if ($(this).is('.file')) {
     $(this).closest('.input-group').find('.image_Preview').attr('src', window.URL.createObjectURL(this.files[0]))
      .css({"width":"250px","height":"150px"});

我想要显示 <video> 标签或 <img> 标签，但不想同时显示两者。

这里我创建了以下代码。首先，我从输入标签中取出文件扩展名，看看它是 jpg 还是 mp4。如果文件扩展名是 jpg 则进入 if 状态，如果是 mp4 则进入 else 状态。问题是我无法使 var ext 全局化。无论我多么努力使它成为全球性的，它都是本地的。

<form  method="post" enctype="multipart/form-data">

  <label class="input-group-prepend" for="image_name">
    <i class="fa fa-camera" data-toggle="tooltip" title="Attach a photo or video"></i> 

<script>
  function getFile(filePath) {
    return filePath.substr(filePath.lastIndexOf('\') + 1).split('.')[0];    
}

var ext;

function getoutput() {
  outputfile.value = getFile(image_name.value);
  ext = extension.value = image_name.value.split('.')[1];
  console.log(ext);
}

getoutput();
console.log(ext);   

if (ext == 'jpg') {
  document.write('<img class="image_Preview">');
  document.write('<h1>It worked for jpg!</h1>');

} else if (ext == 'mp4') {
  document.write('<video class="image_Preview"></video>');
  document.write('<h1>It worked for mp4!</h1>');
}
</script>

  </label>
  <input id="image_name" name="image_name" class="file" type="file" data-count="0" style="display: none;"  onChange='getoutput()'> <br>
      Output Filename <input id='outputfile' type='text' name='outputfile'><br>
      Extension <input id='extension' type='text' name='extension'>

</form>

Answer 1

给img和video不同类，根据文件type/extension隐藏和显示image/video。

<form  method="post" enctype="multipart/form-data">

  <label class="input-group-prepend" for="image_name">
    <i class="fa fa-camera" data-toggle="tooltip" title="Attach a photo or video"></i> 
  </label>
  <input id="image_name" name="image_name" class="file" type="file" data-count="0" style="display: none;">

</form>

<video style="display: none;" class="video_Preview" controls></video>
<img style="display: none;" class="image_Preview">

Jquery

$('#image_name').on('change', function(event) {

  if (
    !event ||
    !event.target ||
    !event.target.files ||
    event.target.files.length === 0
  ) {
    return;
  }

  const fileUrl = window.URL.createObjectURL(event.target.files[0]);
  const imgExtensions = ['jpg', 'png'];
  const videoExtensions = ['mkv', 'mp4', 'webm'];
  const name = event.target.files[0].name;
  const lastDot = name.lastIndexOf('.');

  const ext = name.substring(lastDot + 1);

  if (imgExtensions.includes(ext)) {
    $(".video_Preview").hide(); // hide video preview
    $(".image_Preview").show().attr("src", fileUrl);
  } else if (videoExtensions.includes(ext)) {
    $(".image_Preview").hide(); // hide image preview
    $(".video_Preview").show().attr("src", fileUrl);
  }
});

$('#image_name').on('change', function(event) {
  if (
    !event ||
    !event.target ||
    !event.target.files ||
    event.target.files.length === 0
  ) {
    return;
  }

  const fileUrl = window.URL.createObjectURL(event.target.files[0]);
  const imgExtensions = ['jpg', 'png'];
  const videoExtensions = ['mkv', 'mp4', 'webm'];
  const name = event.target.files[0].name;
  const lastDot = name.lastIndexOf('.');

  const ext = name.substring(lastDot + 1);

  if (imgExtensions.includes(ext)) {
    $(".video_Preview").hide();  // hide video preview
    $(".image_Preview").show().attr("src", fileUrl);
  } else if (videoExtensions.includes(ext)) {
    $(".image_Preview").hide(); // hide image preview
    $(".video_Preview").show().attr("src", fileUrl);
  }
});

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form  method="post" enctype="multipart/form-data">

  <label class="input-group-prepend" for="image_name">
    <i class="fa fa-camera" data-toggle="tooltip" title="Attach a photo or video"></i> 
  </label>
  <input id="image_name" name="image_name" class="file" type="file" data-count="0" style="display: none;">

</form>

<video style="display: none;" class="video_Preview" controls></video>
<img style="display: none;" class="image_Preview">

如何创建 JavaScript 条件来显示视频的图像预览或图片的图像预览？

How can I create a JavaScript condition to display either image preview of a video or image preview of a picture?

html

javascript

file-upload

preview