jquery 实现文件拖入到文件框

可以使用以下代码实现文件拖入到文件框：

<input type="file" id="fileInput" />

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  var fileInput = document.getElementById('fileInput');

  fileInput.addEventListener('dragover', function(e) {
    e.preventDefault();
    $(this).addClass('dragover');
  });

  fileInput.addEventListener('dragleave', function(e) {
    e.preventDefault();
    $(this).removeClass('dragover');
  });

  fileInput.addEventListener('drop', function(e) {
    e.preventDefault();
    $(this).removeClass('dragover');
    var files = e.dataTransfer.files;
    $(this).prop('files', files);
  });
});
</script>

这段代码首先获取文件输入框元素，然后给它添加了三个事件监听器：

- `dragover`：当文件拖拽到文件输入框上方时触发，防止默认行为并添加一个类名以表示拖拽状态。
- `dragleave`：当文件拖拽离开文件输入框时触发，防止默认行为并移除拖拽状态类名。
- `drop`：当文件拖拽完毕并放置到文件输入框时触发，防止默认行为并移除拖拽状态类名，然后获取拖拽的文件并将它们设置为文件输入框的 `files` 属性值，这样就可以在表单提交时自动上传这些文件了。

注意，如果文件输入框是通过 JavaScript 动态生成的，需要使用 `on` 方法添加事件监听器，例如：

$(document).on('dragover', '#fileInput', function(e) {
  // ...
});