js原生上传文件图片等条件判断

最新推荐文章于 2024-11-29 17:33:48 发布

·Π·

最新推荐文章于 2024-11-29 17:33:48 发布

阅读量178

点赞数 8

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/sagshshbkp/article/details/143434324

版权

js原生上传文件图片等条件判断

- 效果图
- 代码

效果图

代码

去博客设置页面，选择一款你喜欢的代码片高亮样式，下面展示同样高亮的 代码片.

<!DOCTYPE html>
<html lang="zh-Hant">

<head>
    <meta charset="UTF-8">
    <title>上传demo</title>
    <style>
        img {
            height: 100%;
            margin: 0 auto;
        }
    </style>
</head>

<body>
    <input type="file" name="file" onchange="verificationPicFile(this)">
    <!-- 不需要展示上传图片的去掉下面div  -->
    <div style="width: 300px; height: 150px; border: 1px solid black;">
        <img id="imgs" src="" alt="">
    </div>
    <script>
        function verificationPicFile(file) {
            let fileTypes = {   // 定义上传类型定义成对象需要其他类型文件直接按格式添加
                jpg: true,
                png: true,
                jpeg: true,
                PNG: true,
                // txt: true,  添加例子
            };
            if (file.value) {     //判断上传内容是否为空
                let size = file.files[0].size / 1024; //获取上传数据大小
                if (!fileTypes[file.value.substring(file.value.lastIndexOf(".") + 1)]) {  //截取上传文件格式进行判断
                    file.value = "";
                    document.getElementById("imgs").src = ""; // 不需要展示上传图片的去掉这行代码
                    alert('不接受此文件类型');
                    return false;
                }
                if (size > 1024) {
                    file.value = "";
                    document.getElementById("imgs").src = ""; // 不需要展示上传图片的去掉这行代码
                    alert('文件大小不能大于1M！');
                    return false;
                }
                let reader = new FileReader();
                reader.onload = function (e) {
                    // 创建form表单添加二进制图片数据
                    let form = new FormData();
                    form.append('imgFile', file.files[0])
                    // 调接口示例
                    fetch('/upload', {
                        method: 'POST',
                        body: form
                    })
                    .then(response => response.json()) // 如果服务器返回JSON
                    .then(data => console.log(data))
                    .catch(error => console.error(error));
                    // 文件判断的下面代码不需要
                    let image = new Image();
                    image.onload = function () {
                        if (image.width != 4096 && image.height != 2302) {
                            file.value = "";
                            document.getElementById("imgs").src = "";
                            alert("文件尺寸应为：295*413（像素）！");
                            return false;
                        } else {
                            document.getElementById("imgs").src = e.target.result;
                        }
                    };
                    image.src = e.target.result; 
                    // 到这里结束
                };
                reader.readAsDataURL(file.files[0]);
            } else {
                return false;
            }
           
        }
    </script>
</body>

</html>
var foo = 'bar';