获取上传文件是否是图片，如果是获取base64格式并展示上传文件

最新推荐文章于 2023-07-12 22:07:19 发布

zlzbt

最新推荐文章于 2023-07-12 22:07:19 发布

阅读量2.5k

点赞数 1

分类专栏： html Javascript css

本文链接：https://blog.csdn.net/zlzbt/article/details/83273852

版权

Javascript 同时被 3 个专栏收录

44 篇文章 2 订阅

订阅专栏

css

9 篇文章 0 订阅

订阅专栏

html

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>上传文件--图片</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img src="" style="height: 100%;" >
<input type="file" class="uploadFiles hidden" accept=".jpg,.jpeg,.png" onchange="isImgStyle(event)">
<button class="btn btn-sm btn-default" onclick="uploadAirportImg(this)">上传图片</button>
</body>
<script>
    function isImgStyle(e){
        // 检查是否是图片
        var filePath = $(evt.target).val(),
        fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();//获取文件后缀名
        //检查后缀名
        if (!fileFormat.match(/.png|.jpg|.jpeg/)) {
            showError('文件格式必须为：png/jpg/jpeg');//showError是另外写的一个显示错误信息的function
            return;
        }
        //获取并记录图片的base64编码
        var reader = new FileReader();
        reader.readAsDataURL(evt.target.files[0]); // 读出 base64
        reader.onloadend = function () {
            // 图片的 base64 格式, 可以直接当成 img 的 src 属性值
            var dataURL = reader.result;//base64
            // 显示图片
            $(evt.target).prev().attr('src', dataURL);
        };
    }

</script>
</html>

e.currentTarget.files[0].name;

currentTarget 事件属性返回其监听器触发事件的节点，即当前处理该事件的元素、文档或窗口。

语法： event.currentTarget

e.currentTarget.files 是一个对象

currenttarget event 获得其监听器触发了事件的那个元素。

zlzbt

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
获取上传文件是否是图片，如果是获取base64格式并展示上传文件

<!DOCTYPE html><html><head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>上传文件--图片</title> <meta...
复制链接

扫一扫