jQuery 只接受 Excel 文件 - Javascript

有时候我们需要在网页中上传Excel文件，而为了简化开发，我们可能会使用 jQuery 来实现上传的功能。但是，当我们使用 jQuery 上传文件时，可能会遇到只能上传 Excel 文件的问题。本文旨在介绍如何使用 jQuery 实现只接受 Excel 文件的上传功能。

限制上传文件类型

为了只接受 Excel 文件，我们首先需要限制上传文件类型。可以通过以下代码实现：

$(document).ready(function(){
  $('#file').change(function(){ // 给 input 标签添加 change 事件
    var fileName = $(this).val(); // 获取文件名
    var ext = fileName.split('.').pop().toLowerCase(); // 获取文件扩展名并转换为小写
    if($.inArray(ext, ['xls','xlsx']) == -1) { // 如果文件类型不是 xls 或 xlsx
      alert('只能上传 Excel 文件'); // 弹出提示框
      $(this).val(''); // 清空文件输入框
    }
  });
});

在上面的代码中，我们为 id 为 file 的 input 标签添加了 change 事件。当用户选择文件后，会触发 change 事件，并获取文件名和文件扩展名。如果文件类型不是 xls 或 xlsx，则会弹出提示框并清空文件输入框。

完整代码

$(document).ready(function(){
  $('#file').change(function(){
    var fileName = $(this).val();
    var ext = fileName.split('.').pop().toLowerCase();
    if($.inArray(ext, ['xls','xlsx']) == -1) {
      alert('只能上传 Excel 文件');
      $(this).val('');
    }
  });
});

需要注意的是，上面的代码需要在 jQuery 的基础上运行。可以在 head 标签中添加以下代码引入 jQuery：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

总结

本文介绍了如何使用 jQuery 实现只接受 Excel 文件的上传功能。通过限制上传文件类型，我们可以避免用户上传不符合要求的文件，提高用户体验。当然，如果需要上传其他类型的文件，只需要修改代码中的文件类型即可。