jQuery 实现文件上传控件清除文件功能

由于安全限制，浏览器不允许通过 JavaScript 直接操作文件上传控件，因此无法通过 jQuery 清除指定的文件。一种常见的解决方案是将文件上传控件替换为一个自定义的按钮，并通过 JavaScript 实现上传文件和清除文件的功能。

以下是一个简单的例子：

HTML 代码：

<div>
  <input type='file' id='file-input' style='display:none;'>
  <button id='upload-btn'>上传文件</button>
  <button id='clear-btn'>清除文件</button>
</div>

JavaScript 代码：

$(function() {
  // 选择文件
  $('#upload-btn').click(function() {
    $('#file-input').click();
  });
  
  // 上传文件
  $('#file-input').change(function() {
    var file = $(this)[0].files[0];
    // 处理文件上传逻辑
    console.log('上传文件：' + file.name);
  });
  
  // 清除文件
  $('#clear-btn').click(function() {
    $('#file-input').val('');
    // 处理清除文件逻辑
    console.log('清除文件');
  });
});

在这个例子中，我们通过隐藏的文件上传控件实现了文件选择的功能，并通过自定义的上传按钮触发选择文件的操作。当用户选择文件后，文件上传控件的 change 事件会被触发，我们可以通过 $(this)[0].files[0] 取到用户选择的文件对象，然后可以进行上传文件的操作。

当用户想要清除已选择的文件时，我们可以通过 $('#file-input').val('') 将文件上传控件的值清空，同时可以进行清除文件的操作。