手机及PC端web多图片上传及回显

最新推荐文章于 2023-07-30 21:21:30 发布

Suncsf

最新推荐文章于 2023-07-30 21:21:30 发布

阅读量762

点赞数

分类专栏： WEB前端

本文链接：https://blog.csdn.net/aaaa4444ss22/article/details/103708956

版权

WEB前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

适用于电脑端及手机端

示例图：

在这里插入图片描述

目录结构

在这里插入图片描述

css样式

直接保存为.css文件或copy至html头部

.suncsf-upload-context {
    width: 90%;
    margin: 1% 5%;
}
.suncsf-upload-image {
    width: 22%;
    padding: 1%;
    float: left;
}
.suncsf-upload-image input {
    display: none;
}
.suncsf-upload-image img {
    width: 100%;
}

js代码

直接保存为.js文件或copy至html底部

(function ($) {
    let ptname = 'suncsf-upload-context';
    let endid = 'suncsf-upload-end';
    let accept = 'image/*';
    let name = '';
    $.extend({
        initSuncUploadImg: function (_name, _endid,m) {
            if (_endid) {
                endid = _endid;
            }
            if(m){
                accept = m;
            }
            if(_name){
                name = _name;
            }
            $.createuploadimg();
        },
        createuploadimg: function () {
            //--------------------
            //创建单个加载上传图片容器
            let content = document.createElement('div');
            content.className = 'suncsf-upload-image add';
            //调用 input file的click即选择事件
            content.onclick = function () {
                if ($(this).hasClass('add')) {
                    let fileinput = $(this).children('input[type=file]')[0];
                    fileinput.click();
                    return;
                }
                if (confirm('是否移除？')) {
                    $(this).remove();
                }
            };
            //--------------------
            //创建图片加载
            let uplaodimg = document.createElement('img');
            uplaodimg.src = './img/添加.png';
            //加入容器
            content.appendChild(uplaodimg);

            //--------------------
            //隐藏的input file 
            let fileinput = document.createElement('input');
            fileinput.name = name+'temp';
            fileinput.type = 'file';
            fileinput.accept = accept;
            //设置change事件 回显图片
            fileinput.onchange = function () {
                // let _this = this;
                let files = this.files;
                var count = files.length;
                // alert(count);
                if (count > 0) {
                    let file = files[0];
                    var img = $(this).prev('img');
                    if (img) {
                        var fr = new FileReader();
                        fr.onload = function () {
                            img.attr('src', this.result);

                        }
                        fr.readAsDataURL(file);
                        $(this).parent().removeClass('add');
                        $(this).prop('name',name);
                        $.createuploadimg();
                    }
                }
            };
            //加入容器
            content.appendChild(fileinput);
            //--------------------加入到主容器内清除浮动div元素之前
            document.getElementsByClassName(ptname)[0].insertBefore(content, document.getElementById(endid));
            // $('#suncsf-upload-end').before('<div class="suncsf-upload-image" οnclick="uploadimgclick(this);"><img src="./img/添加.png" /><input type="file" name="file" οnchange="uploadimgload(this);" /></div>');
        }
    })
})(jQuery);

html代码

直接保存为.html文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,
            minimum-scale=1.0,maximum-scale=1.0, user-scalable=no" />
    <title>Document</title>
    <link href="./css/suncsf.upload.image.css" rel="stylesheet">
</head>

<body>
    <div class="suncsf-upload-context">
        <div id="suncsf-upload-end" style="clear: both;"></div>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="./js/suncsf.upload.image.js"></script>
    <script>
        $(function () {
            $.initSuncUploadImg('file');
        })
    </script>
</body>

</html>