javascript - 如何创建 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

给img和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">