您的位置: 首页  >  文章  >  js上传图片

js上传图片

分类: 文章 • 2025-05-12 16:12:16

html:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>客服中心</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="format-detection" content="telephone=no">
        <meta name="renderer" content="webkit">
        <meta name="HandheldFriendly" content="true">
        <meta name="msapplication-tap-highlight" content="no">

        <link rel="stylesheet" type="text/css" href="./index.css" />
        <script src="./js/jquery-1.12.4.min.js"></script>
        <script src="./js/fileinput.js"></script>
        <style>
            .inner{
                width: 100%;
                margin: 0 auto;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .problem{
                width:100%;
            }
            
        </style>
    </head>

    <body style="height: 100vh;background-color: #EEF5FD;">
        <div class="inner">
            <div class="problem">
                <div class="custom_img">
                    <!--点击上传图片 触发下面的div 点击事件-->
                    <div class="upload_img_wrap">
                        <div id="imgBox"></div>
                        <img class="upload_img" data-id="1" src="img/upload_img.png" />
                        <img style="display:none" class="upload_img" data-id="2" src="img/upload_img.png" />
                        <img style="display:none" class="upload_img" data-id="3" src="img/upload_img.png" />
                    </div>
                    <div style="display: none;width: 100%;height: 100vh;position: relative;">
                        <form id="upBox" class="upload_form" action="" method="post" enctype="multipart/form-data">
                            <div style="display: none;" id="inputBox">
                                <input type="file" name="image[]" data-id="1" title="请选择图片" id="file1" accept="image/png,image/jpg,image/gif,image/JPEG" />
                                <input type="file" name="image[]" data-id="2" title="请选择图片" id="file2" accept="image/png,image/jpg,image/gif,image/JPEG" />
                                <input type="file" name="image[]" data-id="3" title="请选择图片" id="file3" accept="image/png,image/jpg,image/gif,image/JPEG" /> 点击选择图片
                            </div>
                            <input style="display:none" type="submit" id="sub" />
                        </form>
                    </div>
                </div>
                <button class="custom_sub" id="btn">意见反馈</button>
            </div>
        </div>
    </body>

    <script>
        
        var imgNum = 0;
        $(".upload_img_wrap .upload_img").bind("click", function(ev) {
            //console.log(ev.currentTarget.dataset.id)
            var index = ev.currentTarget.dataset.id;
            var that = this;
            if(index == 1) {
                $("#file1").click();
                $("#file1").unbind().change(function(e) {
                    var index = e.currentTarget.dataset.id;
                    if($('#file').val() == '') {
                        return false;
                    }
                    $(that).hide();
                    var filePath = $(this).val();
                    changeImg(e, filePath, index);
                    
                    imgNum++;
                    if(imgNum<3){
                        $(".upload_img").eq(1).show();
                    }
                    $(".upload_img_length").html(imgNum);
                })
            } else if(index == 2) {
                $("#file2").click();
                $("#file2").unbind().change(function(e) {
                    var index = e.currentTarget.dataset.id;
                    if($('#file').val() == '') {
                        return false;
                    }
                    $(that).hide();
                    var filePath = $(this).val();
                    changeImg(e, filePath, index);
                    
                    imgNum++;
                    if(imgNum<3){
                        $(".upload_img").eq(2).show();
                    }
                    $(".upload_img_length").html(imgNum);
                })
            } else if(index == 3) {
                $("#file3").click();
                $("#file3").unbind().change(function(e) {
                    var index = e.currentTarget.dataset.id;
                    if($('#file').val() == '') {
                        return false;
                    }
                    var filePath = $(this).val();
                    changeImg(e, filePath, index);
                    $(that).hide();
                    imgNum++;
                    $(".upload_img_length").html(imgNum);
                })
            }
        })

        function changeImg(e, filePath, index) {
            fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
            //检查后缀名
            if(!fileFormat.match(/.png|.jpg|.jpeg/)) {
                showError('文件格式必须为：png/jpg/jpeg');
                return;
            }
            //获取并记录图片的base64编码
            var reader = new FileReader();
            reader.readAsDataURL(e.target.files[0]);
            reader.onloadend = function() {
                // 图片的 base64 格式, 可以直接当成 img 的 src 属性值        
                var dataURL = reader.result;
                // console.log(dataURL)
                // 显示图片
                $("#imgBox").html($("#imgBox").html() + '<div class="imgContainer" data-index=' + index + '><img   src=' + dataURL + ' οnclick="imgDisplay(this)"><img οnclick="removeImg(this,' + index + ')"  class="imgDelete" src="img/del_img.png" /></div>');
            };

        }

        function removeImg(obj, index) {
            for(var i = 0; i < $(".imgContainer").length; i++) {
                if($(".imgContainer").eq(i).attr("data-index") == index) {
                    $(".imgContainer").eq(i).remove();
                }
            }
            for(var i = 0; i < $(".upload_img").length; i++) {
                $(".upload_img").eq(i).hide();
                if($(".upload_img").eq(i).attr("data-id") == index) {
                    console.log($(".upload_img").eq(i).attr("data-id"))
                    $(".upload_img").eq(i).show();
                }
            }
            imgNum--;
            $(".upload_img_length").html(imgNum);
        }
        
        
        function imgDisplay(obj) {
            var src = $(obj).attr("src");
            var imgHtml = '<div style="width: 100%;height: 100vh;overflow: auto;background: rgba(0,0,0,0.5);text-align: center;position: fixed;top: 0;left: 0;z-index: 1000;display: flex;justify-content: center;    align-items: center;"><img src=' + src + ' style="margin-top: 100px;width: 96%;margin-bottom: 100px;"/><p style="font-size: 50px;position: fixed;top: 30px;right: 30px;color: white;cursor: pointer;" οnclick="closePicture(this)">×</p></div>'
            $('body').append(imgHtml);
        }
        
        function closePicture(obj) {
            $(obj).parent("div").remove();
        }
    </script>

</html>

 

js:

 

(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if(!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 1125) + 'px';
        };
    if(!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);


css:

 

/*公共样å¼*/

* {
    margin: 0;
    box-sizing: border-box;
    padding: 0;
    -webkit-overflow-scrolling: touch;
}

html,
body,
h1,
h2,
h3,
h4,
p,
div,
ul,
li,
ol,
dl,
dt,
dd,
span,
i,
em,
strong,
button,
table,
textarea,
input,
b,
nav,
footer,
form,
frame,
img,
select {
    margin: 0;
    padding: 0;
    list-style: none;
    box-sizing: border-box;
    border: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    font-style: normal;
    text-underline: none;
}

html {
    -webkit-overflow-scrolling: touch;
}

body {
    /*font-family: "Arial","Microsoft YaHei","黑体","宋体","sans-serif";*/
    background: #fff;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    margin: 0 auto;
    position: relative;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: #666;
    outline: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}

a:hover {
    text-decoration: none
}

.fl {
    float: left;
}

.fr {
    float: right;
}

.clearfix:after,
.clearfix:before {
    display: block;
    content: "";
    height: 0;
    clear: both;
    width: 0;
}

.Container {
    width: 1200px;
    margin: 0 auto;
}

.flex {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
}
[v-cloak] {
    display: none;
}
.inner{
    width: 100%;
    margin: 0 auto;
}


.custom_img{
    width: 100%;
    height: 5rem;
    background-color: #fff;
    padding: 0 0.4rem;
}
.custom_img_top{
    font-size: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.custom_img_top p{
    line-height: 1rem;
}
.custom_sub{
    width: 3rem;
    height: 0.8rem;
    background-color: #418BFB;
    border-radius: 0.8rem;
    font-size: 0.4rem;
    color: #fff;
    line-height: 0.8rem;
    display: block;
    margin: 0 auto;
    margin-top: 0.6rem;
}
.upload_img{
    width: 3rem;
    height: 3rem;
}
.upload_img_wrap{
    display: flex;
    width: 100%;
}
#imgBox{
    display: flex;
    
}
.imgContainer {
    display: inline-block;
    width: 3rem;
    height: 3rem;
    margin-left: 1%;
    border: 1px solid #666666;
    position: relative;
    box-sizing: border-box;
    margin-right: 0.2rem;
}

.imgContainer img {
    width: 100%;
    height: 100%;
    cursor: pointer;
    margin-right: 0.2rem;
}
.upload_img_wrap .imgDelete{
    width: 0.8rem;
    height: 0.8rem;
    position: absolute;
    top: -0.3rem;
    right: -0.5rem;
}
.imgContainer p {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 30px;
    background: black;
    text-align: center;
    line-height: 30px;
    color: white;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    display: none;
}

.imgContainer:hover p {
    display: block;
}

js上传图片

js上传图片    js上传图片

效果：js上传图片

 

 

相关推荐