原生 input file上传图片功能

最新推荐文章于 2021-09-06 15:51:09 发布

Mr_LoveJia

最新推荐文章于 2021-09-06 15:51:09 发布

阅读量2.4k

点赞数 2

分类专栏：前端文章标签： javascript jquery css3 html5

本文链接：https://blog.csdn.net/Mr_LoveJia/article/details/112112279

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

总览

上传图片功能，这个功能目前已经很普遍了，几乎每一个业务里都有这个功能，me做了一个基于原生+jquery上传图片功能(并且拓展了缩略图、预览、删除等功能)，以此现在做一个笔记以便以后使用，Hope to help you.

废话不多说直接上代码

一、效果图

在这里插入图片描述

二、代码区域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>dome</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .ui-content {
            height: calc(100vh - 100px - 2em);
        }
        p{
            font-weight: 400;
            text-align: center;
        }
        /*box模块*/
        .box{
            width: 300px;
            margin: 60px auto 16px;
            overflow: hidden;
            background: #ffffff;
            border: 1px solid #5e6264;
            box-shadow: 1px 3px 9px -8px;
            border-radius: 4px;
        }
        .box .demos{
            padding: 10px;
            overflow: hidden;
            position: relative;
        }
        .box .demos label{
            width: 100%;
            letter-spacing: 1px;
            font-size: 16px;
            color: #333;
        }
        .box .demos input{
            width: calc(100% - 12px);
            border: 0px;
            padding: 12px 6px;
            font-size: 16px;
            color: #888;
        }
        .box .demos label .icon-img{
            width: 28px;
            height: 26px;
            color: #999;
            float: right;
            margin-right: 10px;
            display: inline-block;
            background-image: url(img/icon-img.png);
            background-position: 0 0;
            background-repeat: no-repeat;
            background-size: 100%;
        }

        /*缩略图*/
        #imgContainer_waitForUpload{
            width: 100%;
            height: auto;
        }
        #imgContainer_waitForUpload .lookimg{
            width: 50px;
            height: 50px;
            float: left;
            margin: 16px 10px 10px;
            position: relative;
        }
        #imgContainer_waitForUpload .lookimg img{
            width: 100%;
            height: 100%;
        }
        #imgContainer_waitForUpload .lookimg .lookimg_delBtn{
            width: 20px;
            height: 20px;
            position: absolute;
            top: -6px;
            right: -6px;
            display: block;
            background-image: url(img/icon-close.png);
            background-repeat: no-repeat;
            background-size: 100%;
            background-position: 0 0;
        }

        /*遮罩层*/
        .previewBox{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-color: rgba(0,0,0,.5);
            z-index: 2;
            display: none;
        }
        .previewBox img{
            width: 100%;
            height: auto;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="demos">
            <label><span style="color: #ff0000;">*</span>图片：<i class="icon-img" id="div_imgfile"></i></label>
            <input type="file" multiple="multiple" capture="camera" accept='image/*' id="fileItem" num="9" style="display: none;">
            <div id="imgContainer_waitForUpload"></div>

            <div class="previewBox" onclick="previewBoxClose()">
                <img src="" alt="" id="previewImg" onclick="previewBoxClose()">
            </div>
        </div>
    </div>

    <script>
        var div_imgfile = document.getElementById('div_imgfile');
        var fileItem = document.getElementById('fileItem');

        //点击触发input file点击
        div_imgfile.onclick = function () {
            if ($(".lookimg").length >=1) {
                alert("上传图片后一次图片后再点击上传图片有bug！也可以一次性选择多个图片上传！");
                return;
            };
            return $("#fileItem").click();//打开对象选择框
        };

        //选中后点击确定触发的onchange事件
        fileItem.onchange = function setBlogrollImageName(e){
            var file = null;
            if(e.path[0].id == "fileItem"){
                var filesItem =  e.path[0].files;

                if (filesItem.length >= 9) {

                    alert("一次最多上传" + 9 + "张图片");
                    return;
                }else {
                    for(var i = 0;i< filesItem.length;i++){
                        file = filesItem[i];

                        // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
                        // 有关FileReader的讲解：https://www.jianshu.com/p/42fd93f08554
                        var reader = new FileReader();
                        reader.readAsDataURL(file);
                        reader.onload = function(val) {
                            //compress三个参数
                            //imgUrl：读取选中文件的数据(本文章主要针对选中图片的数据)，
                            compress(this.result);
                        };
                    }
                };
            }
        };

        //渲染图片方法
        function compress(imgUrl) {
            //创建预览外层
            var _prevdiv = document.createElement("div");
            _prevdiv.setAttribute("class", "lookimg");

            //创建内层img对象
            var preview = document.createElement("img");
            preview.setAttribute("onclick", "lookimgFun(this)");
            preview.src = imgUrl;//读取加载，将图片编码绑定到元素
            $(_prevdiv).append(preview);

            //创建删除按钮
            var img_belbtn = document.createElement("div");
            img_belbtn.setAttribute("class", "lookimg_delBtn");
            img_belbtn.setAttribute("onclick", "romoveLookimg(this)");
            $(_prevdiv).append(img_belbtn);

            //显示到待传列表中
            $("#imgContainer_waitForUpload").append(_prevdiv);
        }

        //删除选中图片
        function romoveLookimg(val){
            $(val).parent().remove();
        }

        //预览图片
        function lookimgFun(val){
            var src_value = $(val).attr('src');
            $('.previewBox').css("display","block");
            $('#previewImg').attr('src',src_value);
            var previewImgheight = $('#previewImg').height();
            var clientHeight =  document.body.clientHeight;
            var num = null;
            if(previewImgheight < clientHeight){
                num = (clientHeight - previewImgheight)/2;
            }
            $('#previewImg').css("margin-top",num);
        }

        //预览图片关闭功能
        function previewBoxClose(){
            $('.previewBox').css("display","none");
        }
    </script>
</body>
</html>

三、其他

本文章主要是围绕FileReader 对象实现获取本地图片并进行转换成64Base编码格式，并实现上传图片功能；

分享一下有关FileReader对象讲解链接：https://www.jianshu.com/p/42fd93f08554!

Mr_LoveJia

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
原生 input file上传图片功能

总览一、效果图二、代码区域五、其他上传图片功能，这个功能目前已经很普遍了，几乎每一个业务里都有这个功能，me做了一个基于原生+jquery上传图片功能(并且拓展了缩略图、预览、删除等功能)，以此现在做一个笔记以便以后使用，Hope to help you.废话不多说直接上代码一、效果图二、代码区域<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <me
复制链接

扫一扫