解决方案►JavaScript

原生JS实现限制input上传文件格式、大小及清空 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
// 监听文件上传change事件设置背景图片
scrollContent.addEventListener("change", function (e) {
    // 获取input file标签
    let setBackGround = document.querySelector("#setBackGround");
    // 判断触发change的是否为input file
    if (e.target == setBackGround) {
        let file = setBackGround.files[0];
        let reader = new FileReader();
        reader.onload = function (e) {
            let data = e.target.result; // 'data:image/jpeg;base64,/9j/4AAQSk...(base64编码)...'
            let func = () => {
                body.style.backgroundImage = `url('${data}')`;
            }
            // 将文件大小转换为MB格式
            let size = (file.size / (1024 * 1024)).toFixed(2) + "MB";
            // 判断文件类型是否为jpeg/png
            if (file.type !== 'image/jpeg' && file.type !== 'image/png') {
                // 此段为封装的消息提示函数，可换成alert
                openMessage({
                    title: "提示",
                    type: "error",
                    content: `不是有效的图片文件!`
                })
                // 清空input file的value值
                setBackGround.value = "";
                return;
            }
            //判断文件大小是否大于3MB
            if (file.size > 3145728) {
                // 此段为封装的消息提示函数，可换成alert
                openMessage({
                    title: "提示",
                    type: "error",
                    content: `当前文件大小为${size}，建议不超过3MB！`
                })
                // 清空input file的value值
                setBackGround.value = "";
                return;
            }
            // 此段为设置本地存储及更换样式文件，可忽略
            setStorageBefore(func, "bg", data);
            changeSkin("skin", skin_Transparent)
        };
        // 以DataURL的形式读取文件:
        reader.readAsDataURL(file);
    }
})

或者请看下面的文章：

https://blog.virs.xyz/?p=213