单击jquery中的选择文件后如何启用上传按钮

当我们要上传文件时，通常的做法是先选择文件，然后才能启用上传按钮，否则上传按钮将无法使用。本文将介绍如何在jquery中实现这一过程。

HTML

首先，我们需要一个选择文件的input标签和一个上传按钮。代码如下：

<input type="file" name="file" id="file">
<button type="button" id="upload-btn" disabled>上传</button>

需要注意的是，上传按钮要设置disabled属性，使其在页面加载时不可用。

JavaScript

1. 给选择文件的input标签绑定一个change事件，当用户选择了文件时，检查文件是否存在，如果存在，则启用上传按钮。

$("#file").on("change", function(){
  var filepath = $(this).val();
  if(filepath){
    $("#upload-btn").prop("disabled", false);
  }
});

2. 当用户点击上传按钮时，使用ajax上传文件。

$("#upload-btn").on("click", function(){
  var formData = new FormData();
  formData.append("file", $("#file")[0].files[0]);  //获取文件信息
  $.ajax({
    url: "/upload",
    type: "POST",
    processData: false,
    contentType: false,
    data: formData,
    success: function(response){
      console.log("上传成功");
    },
    error: function(xhr, status, error){
      console.log("上传失败");
    }
  });
});

需要注意的是，上传文件需要使用FormData类型，通过append方法添加文件信息。同时，ajax请求的processData和contentType要设置为false，否则无法上传文件。

完整代码

<input type="file" name="file" id="file">
<button type="button" id="upload-btn" disabled>上传</button>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#file").on("change", function(){
    var filepath = $(this).val();
    if(filepath){
      $("#upload-btn").prop("disabled", false);
    }
  });
  
  $("#upload-btn").on("click", function(){
    var formData = new FormData();
    formData.append("file", $("#file")[0].files[0]);  //获取文件信息
    $.ajax({
      url: "/upload",
      type: "POST",
      processData: false,
      contentType: false,
      data: formData,
      success: function(response){
        console.log("上传成功");
      },
      error: function(xhr, status, error){
        console.log("上传失败");
      }
    });
  });
});
</script>

以上就是单击jquery中的选择文件后如何启用上传按钮的方法。通过这个实现，用户可以更方便地上传文件，同时也能提高用户的使用体验。