如何创建JavaScript条件以显示视频的图像预览或图片的图像预览? [英] How can I create a JavaScript condition to display either image preview of a video or image preview of a picture?

问题描述

在图像预览中，当我选择视频时，视频图像预览的右侧会显示一个空白图像框.当我选择图片时，图片图像预览的左侧会显示一个空白区域.因此，<video>标签和<img>标签都一起显示.

On image preview, when I select a video, an empty image box is displayed on the right side of the video image preview. And when I select a picture, an empty space is displayed on the left side of the picture image preview. So both <video> tag and <img> tag are displayed together.

这是相关的 HTML 部分的代码，该代码位于表单标签内:

Here is the code of the relevant HTML part, which is inside a form tag:

<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>标记，但不能同时显示.

I want either <video> tag or <img> tag to be displayed, but not both.

在这里，我创建了以下代码.首先，我从输入标签中获取文件扩展名，以查看它是jpg还是mp4.如果文件扩展名是jpg，则进入if条件；如果是mp4，则进入else条件.问题是我无法将var ext设置为全局.无论我如何尝试使其全球化，它都是本地的.

Here I created the following code. First, I take the file extension from input tag to see whether it is jpg or mp4. If the file extension is jpg it goes to if condition, and if it is mp4 it goes to else condition. The problem is that I cannot make var ext global. It is local no matter how much I try to make it global.

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

推荐答案

赋予img和video不同的类，并根据文件类型/扩展名隐藏和显示图像/视频.

Give the img and video different classes, and hide and show image/video based on the file type/extension.

<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条件以显示视频的图像预览或图片的图像预览?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！