master

分支 (1)

管理

管理

master

input_information
/
index.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <link rel="stylesheet" href="./index.css">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="./send.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            // 关于输入类信息的提交
            let text_mes = document.getElementsByClassName('text_mes')
            let btn_text = document.getElementById('btn_text')
            let text_obj = {
                name: "",
                intro: "",
                phone: "",
                mail: "",
                wechat: ""
            }
            btn_text.onclick = function () {
                for (let i = 0; i < text_mes.length; i++) {
                    text_obj.name = text_mes[0].value
                    text_obj.intro = text_mes[1].value
                    text_obj.phone = text_mes[2].value
                    text_obj.mail = text_mes[3].value
                    text_obj.wechat = text_mes[4].value
                }
                let text_json = JSON.stringify(text_obj)
                console.log(text_json)
                send(text_json)
            }


            // 图片
            $('#picture_1').on('change', function () {
                var imgFiles = $(this)[0].files
                for (i = 0; i < imgFiles.length; i++) {
                    filePath = imgFiles[i].name
                    fileFormat = filePath.split('.')[1].toLowerCase()
                    src = window.URL.createObjectURL(imgFiles[i])
                    var preview = document.getElementById("previewImg_1")
                    var img = document.createElement('img')
                    img.width = 100;
                    img.height = 100;
                    img.src = src;
                    preview.appendChild(img);
                }
            })
            let picture_1 = document.getElementById('picture_1')//获取图片数据
            let upload_1 = document.getElementById('upload_1')//上传数据按钮
            let empty_1 = document.getElementById('empty_1')//清空按钮
            //点击上传
            upload_1.onclick = function () {
                alert('上传成功！')
                console.log(picture_1.files)
            };
            // 清空图片
            empty_1.onclick = function () {
                picture_1.value=""
            }

            $('#picture_2').on('change', function () {
                var imgFiles = $(this)[0].files
                for (i = 0; i < imgFiles.length; i++) {
                    filePath = imgFiles[i].name
                    fileFormat = filePath.split('.')[1].toLowerCase()
                    src = window.URL.createObjectURL(imgFiles[i])
                    var preview = document.getElementById("previewImg_2")
                    var img = document.createElement('img')
                    img.width = 100
                    img.height = 100
                    img.src = src
                    preview.appendChild(img)
                }
            })
            $('#picture_3').on('change', function () {
                var imgFiles = $(this)[0].files
                for (i = 0; i < imgFiles.length; i++) {
                    filePath = imgFiles[i].name
                    fileFormat = filePath.split('.')[1].toLowerCase()
                    src = window.URL.createObjectURL(imgFiles[i])
                    var preview = document.getElementById("previewImg_3")
                    var img = document.createElement('img')
                    img.width = 100
                    img.height = 100
                    img.src = src
                    preview.appendChild(img)
                }
            })
            $('#picture_4').on('change', function () {
                var imgFiles = $(this)[0].files
                for (i = 0; i < imgFiles.length; i++) {
                    filePath = imgFiles[i].name
                    fileFormat = filePath.split('.')[1].toLowerCase()
                    src = window.URL.createObjectURL(imgFiles[i])
                    var preview = document.getElementById("previewImg_4")
                    var img = document.createElement('img')
                    img.width = 100
                    img.height = 100
                    img.src = src
                    preview.appendChild(img)
                }
            })
        }
    </script>
</head>

<body>
    <div id="header">
        <div id="header_left">Camptogo</div>
        <div id="header_right"></div>
    </div>

    <div id="mes">

        <!-- 录入文字类信息 -->
        <div id="text_mes">
            <h2>个人信息</h2><br>
            <input type="text" placeholder="姓名" class="text_mes"><br>
            <input type="text" placeholder="简介" class="text_mes"><br>
            <input type="text" placeholder="手机" class="text_mes"><br>
            <input type="text" placeholder="邮箱" class="text_mes"><br>
            <input type="text" placeholder="微信" class="text_mes"><br>
            <!-- 选择类信息 -->
            <div id="ch_mes">
                <form method="post">
                    是否为独家商户：
                    <input type="radio" name="gender" value="是" />是
                    <input type="radio" name="gender" value="否" />否
                </form>
            </div>
            <button id="btn_text">提交</button><button id="btn_query">查询</button>

        </div>

        <!-- 图片类信息 -->
        <div id="img_mes">
            <!-- 上传资质&荣誉"(多图) -->
            <div class="img_mes_1">
                <div>
                    <label>资质&荣誉</label><br>
                    <input type="file" id="picture_1" multiple />
                </div>

                <div id="previewImg_1">
                </div>
                <button id="empty_1">清空</button>
                <button id="upload_1">上传</button>
            </div>

            <!-- 主理人风采"(多图) -->
            <div class="img_mes_2">
                <div>
                    <label>主理人风采</label><br>
                    <input type="file" id="picture_2" multiple />
                </div>
                <div id="previewImg_2">
                </div>
                <button id="empty_2">清空</button>
                <button id="upload_2">上传</button>
            </div>
            <!-- 正方形头像"(一张图片) -->
            <div class="img_mes_3">
                <div>
                    <label>正方形头像</label><br>
                    <input type="file" id="picture_3" multiple />
                </div>
                <div id="previewImg_3">
                </div>
                <button id="empty_3">清空</button>
                <button id="upload_3">上传</button>
            </div>
            <!-- 形象照"(一张图片) -->
            <div class="img_mes_4">
                <div>
                    <label>形象照</label><br>
                    <input type="file" id="picture_4" multiple />
                </div>
                <div id="previewImg_4">
                </div>
                <button id="empty_4">清空</button>
                <button id="upload_4">上传</button>
            </div>
        </div>

    </div>
</body>

</html>