利用javascript/jquery对上传文件格式过滤的方法

下面是详细的攻略:

概述

在网站开发中，允许用户上传文件是一个很常见的需求。但有时我们需要限制上传文件的类型，比如只允许上传图片文件，禁止上传脚本等危险文件。

利用JavaScript和jQuery，可以非常方便实现对上传文件格式的过滤。通常使用两种方式来实现：一是在前端通过HTML5的input元素属性进行限制，二是通过JS实现上传文件类型的约束。

HTML5的input元素属性

在HTML5规范中，定义了一些在input元素上使用的属性，主要包括accept、multiple和capture属性。其中，accept属性用于指定可以上传的文件类型，multiple属性用于允许上传多个文件，capture属性用于指定从哪里获取文件。

我们可以使用accept属性来实现前端对上传文件类型的限制。例如：

<input type="file" accept="image/*">

上述代码中，input元素的type属性为file，accept属性值为image/*，表示只允许上传类型为image的文件。

这种方式简单易用，但需要考虑浏览器兼容性问题。一些老的浏览器可能无法支持该属性，因此最好使用JS实现。

JavaScript实现上传文件类型过滤

在JS中，我们可以通过事件监听的方式实现文件上传的过滤。具体步骤如下：

1. 获取input元素对象，并为其绑定change事件

var input = document.querySelector('input[type="file"]');
input.addEventListener('change', function() {
    // 在此处编写处理文件上传的代码
}, false);

1. 获取文件对象，判断文件类型是否符合要求

var files = input.files;
if (files && files[0]) {
    var file = files[0];
    var fileType = file.type;
    if (fileType.indexOf('image/') === -1) {
        alert('只允许上传图片文件');
        return;
    }
}

在上述代码中，我们通过input.files属性获取了文件对象，并取出第一个文件进行判断。如果文件类型不是以'image/'开头，就弹出一个提示框，并返回，不再继续上传。

完整的代码如下：

<input type="file" id="file-input">

<script>
var input = document.getElementById('file-input');
input.addEventListener('change', function() {
    var files = input.files;
    if (files && files[0]) {
        var file = files[0];
        var fileType = file.type;
        if (fileType.indexOf('image/') === -1) {
            alert('只允许上传图片文件');
            return;
        }
    }
}, false);
</script>

jQuery实现上传文件类型过滤

如果你使用jQuery，也可以使用类似的方式实现上传文件类型的过滤。

在jQuery中，我们可以使用change事件来监听input元素的文件选择事件，然后根据文件类型判断是否允许上传，代码如下：

<input type="file" id="file-input">

<script>
$('#file-input').on('change', function() {
    var files = $(this)[0].files;
    if (files && files[0]) {
        var file = files[0];
        var fileType = file.type;
        if (fileType.indexOf('image/') === -1) {
            alert('只允许上传图片文件');
            return;
        }
    }
});
</script>

相比原生JS，这种方式更简单方便，但需要引入jQuery库文件。

示例说明

以下是两个使用JavaScript和jQuery实现文件类型过滤的示例：

示例一：使用JavaScript实现上传文件类型过滤

<input type="file" id="file-input">

<script>
var input = document.getElementById('file-input');
input.addEventListener('change', function() {
    var files = input.files;
    if (files && files[0]) {
        var file = files[0];
        var fileType = file.type;
        if (fileType.indexOf('image/') === -1) {
            alert('只允许上传图片文件');
            return;
        }
    }
}, false);
</script>

在上述代码中，我们为input元素绑定了change事件，并在事件处理函数中获取了上传文件对象，判断是否允许上传。

示例二：使用jQuery实现上传文件类型过滤

<input type="file" id="file-input">

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$('#file-input').on('change', function() {
    var files = $(this)[0].files;
    if (files && files[0]) {
        var file = files[0];
        var fileType = file.type;
        if (fileType.indexOf('image/') === -1) {
            alert('只允许上传图片文件');
            return;
        }
    }
});
</script>

在上述代码中，我们使用jQuery获取了input元素，并为其绑定change事件。在事件处理函数中，判断了上传文件的类型，如果不是图片文件就弹出提示框。