在前端开发中，我们经常需要上传文件到服务器。但是有时候用户会上传错误的文件类型，如文本文件上传成了图片，这会导致服务器无法处理或者显示异常。因此，在上传文件时，我们需要对文件类型进行限制。本文将介绍如何使用 jQuery 在上传文件时限制文件类型。
限制文件类型的方法
在 HTML5 中，我们可以使用 accept 属性来指定可以选择的文件类型。例如：
<input type="file" accept=".jpg,.jpeg,.png">
上述代码表示只能选择 jpg、jpeg 和 png 类型的图片文件。然而，该属性只是在用户选择文件时进行限制，并不能完全阻止用户上传其他类型的文件。
为了在上传时进行限制，我们可以使用 jQuery 和 JavaScript 来实现。
具体做法如下：
- 获取文件名
首先，我们需要获取用户选择的文件名，可以使用以下代码：
var fileName = $('#fileInput').val().split('\\').pop();其中，#fileInput 表示文件上传控件的 ID。
- 检查文件类型
接下来，我们需要检查文件类型是否符合要求。可以通过判断文件后缀名来确定文件类型。例如：
if (fileName.split('.').pop().toLowerCase() != 'jpg' && fileName.split('.').pop().toLowerCase() != 'jpeg' && fileName.split('.').pop().toLowerCase() != 'png') {
alert('只能上传 JPG、JPEG 和 PNG 格式的图片！');
return false;
}- 绑定上传事件
最后，我们需要将上述代码绑定到文件上传控件的上传事件中。可以使用以下代码：
$('#fileInput').on('change', function() {
var fileName = $(this).val().split('\\').pop();
if (fileName.split('.').pop().toLowerCase() != 'jpg' && fileName.split('.').pop().toLowerCase() != 'jpeg' && fileName.split('.').pop().toLowerCase() != 'png') {
alert('只能上传 JPG、JPEG 和 PNG 格式的图片！');
$(this).val('');
}
});上述代码表示当文件上传控件的值发生变化时（即用户选择了文件），会执行检查文件类型的代码。如果文件类型不符合要求，则会弹出提示框，并清空文件上传控件的值。
示例代码
下面是一个完整的示例代码，包括 HTML、JavaScript 和 CSS：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
---------------------
-------
---------- -
-------- -----
-
---------- -
-------- ---- -----
----------------- --------
------ -----
---------- -----
------- --------
-
--------
-------
------
----- ---------- ------------- ------------------------------
------ -----------------------------
------ ----------- -------------- -------------------------
------- ------------- --------------------------
-------
------- -----------------------------------------------------------
--------
--------------------------- ---------- -
--- -------- - ----------------------------------------
-- ---------------------------------------- -- ----- -- --------------------------------------- -- ------ -- --------------------------------------- -- ------ -
----------- -------- - --- ---------
-------
-
-- ----- --------
---
---------
-------
-------在上述代码中，我们使用了 jQuery 来绑定上传按钮的点击事件。当用户点击上传按钮时，会执行检查文件类型的代码。如果文件类型不符合要求，则会弹出提示框。如果文件类型符合要求，则可以执行文件上传操作。
总结
本文介
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/10123