在Web前端开发中，文件上传是常见的一项功能，用户可以通过表单上传图片、文档、视频等文件。为确保上传的文件符合业务需求，通常需要对上传的文件类型和文件大小进行判断，以防止不符合要求的文件上传到服务器，造成资源浪费或安全问题。本文将详细解析如何通过JavaScript自定义函数来实现对上传文件类型和大小的判断。
### 文件类型和大小判断的重要性
1. **安全性考虑**：允许上传特定类型的文件可以防止恶意文件上传，比如脚本、可执行文件等，这些文件可能对服务器构成威胁。
2. **性能考虑**：限制上传文件的大小可以避免因上传大文件而导致的服务器性能下降。
3. **用户体验**：通过前端提示，减少用户因文件类型或大小不符合要求而上传失败的情况，提高用户操作的便利性。
### JS自定义函数功能实现
通过编写JavaScript代码，我们可以创建一个自定义函数`checkFileSizeAndType`，该函数将实现以下功能：
- 验证文件大小是否超过了设定的阈值。
- 验证文件类型是否符合预设的允许类型列表。
### 关键技术点解释
1. **获取文件对象**：
使用`document.getElementById`获取input元素，并通过`file.files[0]`访问用户选择的第一个文件对象。
2. **文件大小判断**：
通过文件对象的`size`属性获取文件大小，并与预设的最大允许大小`maxSize`进行对比。这里的`maxSize`需要根据实际需求设置，通常以字节为单位。
3. **文件类型判断**：
通过文件名`fileName`获取文件的后缀名，然后与允许的文件类型数组`allowType`进行对比，判断文件类型是否被允许。
4. **错误提示**：
如果文件大小超出限制或文件类型不符合要求，则通过`alert`函数弹出错误提示信息，并根据错误类型进行相应的提示。
### 代码实现详解
1. **函数声明**：
```javascript
function checkFileSizeAndType(maxSize, allowType, fileId) {
// 函数体
}
```
这里`maxSize`是允许的最大文件大小，`allowType`是允许上传的文件类型数组，`fileId`是HTML中`input`元素的ID。
2. **文件获取及验证**：
```javascript
var file = document.getElementById(fileId).files[0];
if (!fileInfo) {
alert("请选择文件！");
return false;
}
```
在这段代码中，首先获取用户选择的文件对象。如果没有文件被选择，将会弹出提示并返回`false`。
3. **获取文件后缀并判断类型**：
```javascript
var fileName = fileInfo.name;
var file_type_name = fileName.substring(fileName.lastIndexOf('.') + 1, fileName.length);
var isUpload = true;
var errNum = 0;
```
这部分代码通过文件名获取文件的后缀名，并定义标志变量`isUpload`和错误编号`errNum`来指示文件是否可以通过上传验证。
4. **判断文件大小**：
```javascript
if (fileInfo.size > maxSize) {
isUpload = false;
errNum = 1;
}
```
检查文件大小是否超过了`maxSize`，如果超过，则设置`isUpload`为`false`并记录错误编号。
5. **判断文件类型**：
```javascript
for (var i in types) {
if (types[i] == file_type_name) {
isUpload = true;
return isUpload;
} else {
isUpload = false;
errNum = 2;
}
}
```
如果文件大小没有问题，则遍历允许上传的文件类型数组，与文件后缀名进行对比。如果找到匹配项，则认为文件类型是允许的；否则，设置`isUpload`为`false`并记录错误编号。
6. **错误提示**：
```javascript
if (!isUpload) {
// 根据errNum的值给出不同的提示信息
}
```
根据`isUpload`和`errNum`的值，给出相应的错误提示信息，并清空已选择的文件，以供用户重新选择。
### 结束语
本文通过具体的代码示例，详细介绍了如何使用JavaScript编写自定义函数来判断web前端上传的文件类型和大小。需要注意的是，在实际应用中，服务器端也需要进行文件类型和大小的判断，以防客户端的判断被绕过。此外，对于安全更为敏感的场景，还应进一步增加文件内容安全性的校验。
