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

Question

在图像预览中，当我选择视频时，视频图像预览的右侧会显示一个空白图像框。当我选择图片时，图片图像预览的左侧会显示一个空白区域。因此，<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

<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">