js图片上传功能前端

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/weixin_41085761/article/details/92782101

/*上传图片css*/
  .imageDiv {
            display: inline-block;
            width: 100px;
            height: 100px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            border: 1px dashed #e6e6e6;
            background: #F5F5F5;
            position: relative;
            overflow: hidden;
            margin: 10px;
        }
 .cover {
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: rgba(0,0,0,.3);
            display: none;
            line-height: 99px;
            text-align: center;
            cursor: pointer;
        }
     .cover .delbtn {
                color: #f44336;
                font-size: 16px;
                font-style: normal;
            }
   .imageDiv:hover .cover {
            display: block;
        }
  .addImages {
            display: inline-block;
            width: 100px;
            height: 100px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            border: 1px dashed #ddd;
            background: #fafafa;
            position: relative;
            overflow: hidden;
            margin: 10px;
        }
  .clickUpload {
            text-align: center;
            display: inline-block;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 5px 0 0 0;
            color: #999;
        }
   .clickUpload span {
                font-size: 40px;
                color: #0088CC;
            }

        .fileUpload {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            opacity: 0;
            cursor: pointer;
        }
        /*图片上传end*/

上传显示文件框

  <div style="padding: 10px 0px 5px 80px; width: 700px; height: 400px;">
        <form method="post" id="passForm">
            <div id="fileCenter">
                <p style="color: #888; padding: 5px 0; margin: 0">注：每张照片大小不可超过4M,最多可传8张</p>
                <div class="fileImgDiv">
                    <div class="addImages">
                        <input type="file" class="fileUpload" id="i_fileInput" multiple="" accept="image/png, image/jpeg, image/gif, image/jpg" onchange="roomManage.getUrl(this.files);" />
                        <div class="clickUpload">
                            <span>+</span>
                            <p>点击上传图片</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="msg" style="display: none;"></div>
        </form>
    </div>

jquery代码:

 $(".fileUpload").change(function () {
                //获取选择图片的对象
                var docObj = $(this)[0];
                var picDiv = $(this).parents(".fileImgDiv");
                var fileList = docObj.files;
                for (var i = 0; i < fileList.length; i++) {
                    //动态添加html元素
                    var picHtml = "<div class='imageDiv' > <img style='object-fit:cover;' id='img" + fileList[i].name + "' /> <div class='cover'><i class='delbtn'>删除</i></div></div>";
                    picDiv.prepend(picHtml);
                    //获取图片imgi的对象
                    var imgObjPreview = document.getElementById("img" + fileList[i].name);
                    if (fileList && fileList[i]) {
                        //图片属性
                        imgObjPreview.style.display = 'block';
                        imgObjPreview.style.width = '100px';
                        imgObjPreview.style.height = '100px';
                        if (userAgent.indexOf('MSIE') == -1) {
                            //IE以外浏览器
                            imgObjPreview.src = window.URL.createObjectURL(docObj.files[i]); //获取上传图片文件的物理路径;
                            console.log(imgObjPreview.src);
                        } else {
                            //IE浏览器
                            if (docObj.value.indexOf(",") != -1) {
                                var srcArr = docObj.value.split(",");
                                imgObjPreview.src = srcArr[i];
                            }
                            else { imgObjPreview.src = docObj.value; }
                        }
                    }
                }
                /*删除图片功能*/
                $(".delbtn").click(function () {
                    var _this = $(this);
                    _this.parents(".imageDiv").remove();
                });
            });
            

效果图：鼠标悬停在图片上会有删除的透明字

显示出来，

上面的图片的外面的div的框的大小自己可以根据实际调一下，网上虽然有很多插件，但是一般插件的功能都比较多，而且融合进自己的项目也很麻烦，自己写一个，而且简洁美观 。