时间戳

首页 > 解决方案 > 如何在jQuery中获取文件是否上传

javascript - 如何在jQuery中获取文件是否上传

问题描述

我正在使用 Bootstrap 上传文件，如果已上传，我想显示关闭按钮 (X)，否则我不想显示该按钮：

<script>
  $(document).ready(function(){
      var file=$('#flFile');
      var dvClose=$('#dvClose');
      dvClose.hide();
       file.click(function(){
            dvClose.show();
       });
       $('#close').click(function(){
          file.val('');
          dvClose.hide();
      });[enter image description here][1]
    });
  </script>

<div class="input-group">
  <div class="custom-file">
    <input type="file" id="flFile"> 
    <div id='dvClose'><label style='padding-top: 7px;' class="" for="">
<span id='close' class='fa fa-close'></span></label></div> 
  </div>
  <div class="input-group-prepend">
  </div>
</div>

我希望 X 按钮仅在文件上传时可见。

我只想在文件上传时显示那个 X 按钮

标签： javascriptjqueryjspbootstrap-4

解决方案

使用FromData通过 AJAX 请求发送并监听成功事件。

const input = document.querySelector('input[type="file"]');

const formData = new FormData();
formData.append('file', input.files[0]);

fetch('https://example.com', {
  method: 'POST',
  body: formData
}).then(() => {
    console.log('File successfully uploaded.');
}).catch(() => {
    console.log('An error occurred while uploading.');
});

注意：当此事件发生时，您可能必须侦听某些事件，例如onChange文件输入和发送数据。

推荐阅读