用原生js写上传图片的组件v1.0（后续会完善）

最新推荐文章于 2024-04-17 16:35:15 发布

wj_秦桑低绿枝

最新推荐文章于 2024-04-17 16:35:15 发布

阅读量794

点赞数 1

分类专栏：实现组件功能文章标签： js jquery javascript

本文链接：https://blog.csdn.net/qinsangdilvzhi/article/details/107459428

版权

实现组件功能专栏收录该内容

3 篇文章 0 订阅

订阅专栏

用js实现上传图片的功能：
要求：
1.上传的图片可预览，可删除，可被覆盖更新
2.要求图片格式为jpg和png，大小不能超过2M

我真实实现的时候遇到一些问题，并进行了一些改进，如：

< input type=“file”/>不能改样式，我就用我的样式去替换，点击我自己写的button，触发input的点击事件，再把input隐藏掉。
加了一个浏览器不兼容FileReader 方法时的判断，并给出提示
对于img里src为空时，会出现一个图片破了的小图标，在css样式中把它进行隐藏。

解释一下FileReader对象：
会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。

下一步的改进与思考：
1.如果FileReader浏览器不兼容的话，用什么方法实现呢？
2.将图片信息封装好，写传给后台的方法
3.实现图片能从后台读取浏览

v1.0版本实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片上传demo</title>
    <style>
        .body {
            margin-top: 50px;
            text-align: center;
        }
    
        .pic-contain {
            margin: auto;
            margin-top: 10px;
            height: 350px;
            width: 320px;
            border: 1px solid black;
        }
    
        /* 处理src为空显示的样式 */
        img[src=""],
        img:not([src]) {
            opacity: 0;
        }
    </style>
</head>
<body>
    <div class="body">
        <div>请上传jpg、png格式的图片，且文件大小不超过2M</div>
        <input type="file" style="display: none;" id="file" onChange="picSelect(this)">
        <button onclick="openPic()">请选择上传的图片</button>
        <button class="del" onclick="del()">删除</button>

        <div class="pic-contain" onclick="openPic()">
            <img style="height: 350px; width: 320px;" class="pic" />

        </div>
    </div>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script type="text/javascript">
        var flag = true;
        function openPic() {
            //模拟鼠标点击事件
            $("#file").click();
        }
        function picSelect(obj) {
            if(typeof FileReader == "undefined"){
                alert("当前浏览器不支持FileReader接口！")
                return; 
            }
            var file = obj.files[0];
            var reg = /(\.jpg|\.png)$/;//正则匹配图片后缀为jpg或者png
            if (!reg.test(file.name) ) {
                alert("只能上传jpg和png格式的图片！");
                return;
                // 2097152
            } else if(file.size>2097152){
                alert("只能上传小于2M的图片！");
                return;
            }else{
                var reader = new FileReader();
                //会读取指定的 Blob 或 File 对象。读取操作完成的时候，readyState 会变成已完成DONE，并触发 loadend 事件，同时 result 属性将包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容。
                reader.readAsDataURL(file);
                reader.onload = function (e) {//读取文件
                    $(".pic").attr("src", e.target.result);//把图片地址赋给src
                }
               
            }
        }
        function del() {
            $(".pic").attr('src', '');//把空赋给src
        }
    </script>
</body>
</html>

wj_秦桑低绿枝

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用原生js写上传图片的组件v1.0（后续会完善）

用js实现上传图片的功能：要求：1.上传的图片可预览，可删除，可被覆盖更新2.要求图片格式为jpg和png，大小不能超过2M我真实实现的时候遇到一些问题，并进行了一些改进，如：< input type=“file”/>不能改样式，我就用我的样式去替换，点击我自己写的button，触发input的点击事件，再把input隐藏掉。加了一个浏览器不兼容FileReader 方法时的判断，并给出提示对于img里src为空时，会出现一个图片破了的小图标，在css样式中把它进行隐藏。解释
复制链接

扫一扫