如何在jQuery中上传或不上传文件

Question

我使用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按钮

Answer 1

使用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以获取文件输入，并在发生此事件时发送数据。