如果在 javascript 中单击按钮，则显示和不显示图像

Question

so I have a file button that lets a user select a video to upload it and another button that uploades the video but when a video is selected a preview has to appear before it is uploaded.问题是，即使没有选择视频，视频应该在哪里也有很多空间，目标是如果没有点击视频按钮，那么视频应该显示：没有，但如果点击了，那么视频也出现了。就像facebook的视频或图片预览。

const realFileBtn = document.getElementById("id_video");
const customBtn = document.getElementById("custom-b");

customBtn.addEventListener("click", function() {
    realFileBtn.click();
});

$(document).on("change", ".file_multi_video", function(evt) {
    var $source = $('#video_here');
    $source[0].src = URL.createObjectURL(this.files[0]);
    $source.parent()[0].load();
});

input {
    border: none;
    order: 0;
    font-family: sans-serif;
    padding: 5px;
    border-radius: 7.5px;
    width: 100%;
    height: 35px;
    display: flex;
}

#custom-b {
    border: none;
    font-family: sans-serif;
    padding: 5px;
    order: 1;
    border-radius: 7.5px;
    width: 15%;
    display: flex;
    justify-content: center;

}

.preview-image {
    width: 100%;
    height: 100%;
    display: flex;
    order: 0;
    padding-top: 8px;
    padding-bottom: 8px;
    align-self: center;
}
.uploades .submit-button {
    border: none;
    font-family: sans-serif;
    padding: 5px;
    order: 2;
    display: flex;
    border-radius: 7.5px;
    width: 100%;
    margin-top: 16px;
    justify-content: center;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
                    <input type="text" name="text" placeholder="Add a comment..." required="" id="id_text">
                    <input type="file" name="video" id="id_video" accept="video/*" class="file_multi_video" style="display: none;">
                    <video id="blah" class="preview-image">
                        <source id="video_here">
                    </video>
                    <button type="button" class="video-button" id="custom-b">video</button>
                </div>

                <button class="submit-button" type="submit">Save</button>

有任何问题请告诉我；）

Answer 1

只需对您的代码进行最少的修改，您就可以使用 jQuery 的“隐藏”/“显示”功能。

为此，您需要开始以不可见状态加载元素，就像这些函数使用“display:none”样式所做的那样。然后你可以根据文件是否被选中调用正确的函数。

如下所示...

const realFileBtn = document.getElementById("id_video");
const customBtn = document.getElementById("custom-b");

customBtn.addEventListener("click", function() {
  realFileBtn.click();
});

$(document).on("change", ".file_multi_video", function(evt) {
  var $source = $('#video_here');
  var $source_parent = $source.parent();
  //ensure that a file has been selected
  if (this.files[0] !== undefined) {
    $source[0].src = URL.createObjectURL(this.files[0]);
    $source_parent[0].load();
    $source_parent.show();
  } else {
    $source_parent.hide();
  }
});

input {
  border: none;
  order: 0;
  font-family: sans-serif;
  padding: 5px;
  border-radius: 7.5px;
  width: 100%;
  height: 35px;
  display: flex;
}

#custom-b {
  border: none;
  font-family: sans-serif;
  padding: 5px;
  order: 1;
  border-radius: 7.5px;
  width: 15%;
  display: flex;
  justify-content: center;
}

.preview-image {
  width: 100%;
  height: 100%;
  display: flex;
  order: 0;
  padding-top: 8px;
  padding-bottom: 8px;
  align-self: center;
}

.uploades .submit-button {
  border: none;
  font-family: sans-serif;
  padding: 5px;
  order: 2;
  display: flex;
  border-radius: 7.5px;
  width: 100%;
  margin-top: 16px;
  justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <input type="text" name="text" placeholder="Add a comment..." required="" id="id_text">
  <input type="file" name="video" id="id_video" accept="video/*" class="file_multi_video" style="display: none;">
  <video id="blah" class="preview-image" style="display:none">
    <source id="video_here">
  </video>
  <button type="button" class="video-button" id="custom-b">video</button>
</div>

<button class="submit-button" type="submit">Save</button>