请问点击按钮怎么获取上传的图片?

Question

请问点击按钮怎么获取上传的图片?

20624

发布于
2020-09-01

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <title>登记</title>
    <script src="../static/assets/js/jquery-2.0.3.min.js"></script>
    <style type="text/css">
        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            padding: 0;
            font: 16px/20px microsft yahei;
        }

        .wrap {
            width: 100%;
            height: 100vh;
            position: fixed;
            top: 0;
            opacity: 0.8;
            background: linear-gradient(to bottom right, #1296db, #b2e1fa);
            background: -webkit-linear-gradient(to bottom right, #1296db, #b2e1fa);
        }

        .container {
            width: 70%;
            margin: 30vw auto 0;
        }

        .container h1 {
            text-align: center;
            color: #FFFFFF;
            font-weight: 500;
        }

        .container input {
            width: 100%;
            display: block;
            height: 10vw;
            border: 0;
            outline: 0;
            padding: 0 3.75vw;
            margin: 32px auto;
            border-radius: 99999px;
            -webkit-transition: all 0s ease-in 0.1ms;
            -moz-transition: all 0s ease-in 0.1ms;
            transition: all 0s ease-in 0.1ms;
        }

        button {
            width: 100%;
            display: block;
            height: 12vw;
            border: 0;
            outline: 0;
            padding: 6px 10px;
            margin: 32px auto;
            -webkit-transition: all 0s ease-in 0.1ms;
            -moz-transition: all 0s ease-in 0.1ms;
            transition: all 0s ease-in 0.1ms;
        }

        .container input[type="text"],
        .container input[type="password"] {
            background-color: #FFFFFF;
            font-size: 4.375vw;
            color: #50a3a2;
        }

        .container button {
            font-size: 4.375vw;
            letter-spacing: 2px;
            color: #fff;
            background-color: #0f6fff;
            border-radius: 99999px;
        }

        /* .username:focus {
            width: 400px;
        }
        .pwd:focus {
            width: 400px;
        }             */

        .wrap ul {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -10;
        }

        .wrap ul li {
            list-style-type: none;
            display: block;
            position: absolute;
            bottom: -120px;
            width: 15px;
            height: 15px;
            z-index: -8;
            background-color: rgba(255, 255, 255, 0.15);
            animation: square 25s infinite;
            -webkit-animation: square 25s infinite;
        }

        .wrap ul li:nth-child(1) {
            left: 0;
            animation-duration: 10s;
            -moz-animation-duration: 10s;
            -o-animation-duration: 10s;
            -webkit-animation-duration: 10s;
        }

        .wrap ul li:nth-child(2) {
            width: 40px;
            height: 40px;
            left: 10%;
            animation-duration: 15s;
            -moz-animation-duration: 15s;
            -o-animation-duration: 15s;
            -webkit-animation-duration: 15s;
        }

        .wrap ul li:nth-child(3) {
            left: 20%;
            width: 25px;
            height: 25px;
            animation-duration: 12s;
            -moz-animation-duration: 12s;
            -o-animation-duration: 12s;
            -webkit-animation-duration: 12s;
        }

        .wrap ul li:nth-child(4) {
            width: 50px;
            height: 50px;
            left: 30%;
            -webkit-animation-delay: 3s;
            -moz-animation-delay: 3s;
            -o-animation-delay: 3s;
            animation-delay: 3s;
            animation-duration: 12s;
            -moz-animation-duration: 12s;
            -o-animation-duration: 12s;
            -webkit-animation-duration: 12s;
        }

        .wrap ul li:nth-child(5) {
            width: 60px;
            height: 60px;
            left: 40%;
            animation-duration: 10s;
            -moz-animation-duration: 10s;
            -o-animation-duration: 10s;
            -webkit-animation-duration: 10s;
        }

        .wrap ul li:nth-child(6) {
            width: 75px;
            height: 75px;
            left: 50%;
            -webkit-animation-delay: 7s;
            -moz-animation-delay: 7s;
            -o-animation-delay: 7s;
            animation-delay: 7s;
        }

        .wrap ul li:nth-child(7) {
            left: 60%;
            animation-duration: 8s;
            -moz-animation-duration: 8s;
            -o-animation-duration: 8s;
            -webkit-animation-duration: 8s;
        }

        .wrap ul li:nth-child(8) {
            width: 90px;
            height: 90px;
            left: 70%;
            -webkit-animation-delay: 4s;
            -moz-animation-delay: 4s;
            -o-animation-delay: 4s;
            animation-delay: 4s;
        }

        .wrap ul li:nth-child(9) {
            width: 100px;
            height: 100px;
            left: 80%;
            animation-duration: 20s;
            -moz-animation-duration: 20s;
            -o-animation-duration: 20s;
            -webkit-animation-duration: 20s;
        }

        .wrap ul li:nth-child(10) {
            width: 120px;
            height: 120px;
            left: 90%;
            -webkit-animation-delay: 6s;
            -moz-animation-delay: 6s;
            -o-animation-delay: 6s;
            animation-delay: 6s;
            animation-duration: 30s;
            -moz-animation-duration: 30s;
            -o-animation-duration: 30s;
            -webkit-animation-duration: 30s;
        }

        @keyframes square {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0)
            }

            100% {
                bottom: 400px;
                transform: rotate(600deg);
                -webit-transform: rotate(600deg);
                -webkit-transform: translateY(-500);
                transform: translateY(-500)
            }
        }

        @-webkit-keyframes square {
            0% {
                -webkit-transform: translateY(0);
                transform: translateY(0)
            }

            100% {
                bottom: 400px;
                transform: rotate(600deg);
                -webit-transform: rotate(600deg);
                -webkit-transform: translateY(-500);
                transform: translateY(-500)
            }
        }

        .upimg {
            position: relative;
            float: left;
            width: 100%;
            padding: 5vw;
            margin-bottom: 32px;
            display: flex;
            justify-content: space-between;
            border: 1px dashed #fff;
            border-radius: 5vw;
        }

        .upimg::before {
            content: "上传图片";
            position: absolute;
            top: -4.2vw;
            font-size: 3.75vw;
            color: #fff;
        }

        .upimg-module {
            float: left;
            display: block;
            position: relative;
            width: 26vw;
            height: 26vw;
        }

        .upimg-module input {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            opacity: 0;
            cursor: pointer;
        }

        .upimg-module img {
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            border-radius: 4.375vw;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="container">
            <h1>登记页</h1>
            <input type="text" class="car_num" id="car_num" placeholder="请输入车牌号（大写）" />
            <input type="text" class="car_num" id="checkPhone" placeholder="请输入手机号码" />
            <div class="upimg">
                <div class="upimg-module">
                    <img id="img1" src="upimg.png" />
                    <input type="file" id="file" />
                </div>
                <div class="upimg-module">
                    <img id="img2" src="upimg.png" />
                    <input type="file" id="fileto" />
                </div>
            </div>
            <button class="button" onclick="add()">登记新能源汽车</button>
        </div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <input id="comid" style="display:none" th:value="${comid}">
</body>

<script>
    function add() {
        let car_num = $("#car_num").val();
        let comid = GetQueryValue1('comid');
        var creg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
        var xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
        if (car_num.length == 7) {
            if (!creg.test(car_num)) {
                alert("请输入正确格式的车牌号");
                return false
            }
        } else if (car_num.length == 8) {
            if (!xreg.test(car_num)) {
                alert("请输入正确格式的车牌号");
                return false
            }
        } else {
            alert("请输入正确格式的车牌号");
            return false;
        };


        var phone = document.getElementById('checkPhone').value;
        if (!(/^1[3456789]\d{9}$/.test(phone))) {
            alert("手机号码有误，请重填");
            return false;
        };

        $.ajax({
            type: "POST",
            url: "/special/car/add",
            data: {
                carNum: car_num,
                comid: comid
            },
            dataType: "json",
            success: function (data) {
                console.log(data);
                if (data.code == 200) {
                    alert("登记成功");
                } else {
                    alert(data.message);
                }
            }
        });
    };

    function upimg(name, id, img) {
        name.onchange = function () {
            var file = document.getElementById(id);
            var image = document.getElementById(img);
            // var image = document.querySelector("img");
            var fileData = this.files[0]; //获取到一个FileList对象中的第一个文件( File 对象),是我们上传的文件
            var pettern = /^image/;

            console.info(fileData.type)

            if (!pettern.test(fileData.type)) {
                alert("图片格式不正确");
                return;
            }
            var reader = new FileReader();
            reader.readAsDataURL(fileData); //异步读取文件内容，结果用data:url的字符串形式表示
            /*当读取操作成功完成时调用*/
            reader.onload = function (e) {
                console.log(e); //查看对象
                console.log(this.result); //要的数据 这里的this指向FileReader（）对象的实例reader
                image.setAttribute("src", this.result)
            }
        };
    };
    upimg(file, 'file', 'img1');
    upimg(fileto, 'fileto', 'img2');

    function GetQueryValue1(queryName) {
        var reg = new RegExp("(^|&)" + queryName + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return decodeURI(r[2]);
        } else {
            return null;
        }
    }
</script>

</html>

javascript 前端 jquery html css

阅读 1.6k

1 个回答

得票最新

aaron_lawliet

17818

发布于
2020-09-01

✓ 已被采纳

/*

参数：
files 一个文件对象，目前只支持单个文件。files = inputDomObj.files[0],  或files = inputJQobj[0].files[0]
userData 用户的基本信息，包括uuid、token等
domain 主域名
sussFn 上传成功之后调用
errorFn 上传失败时候调用（目前3次ajax失败调用的均是这个方法）
debug 当debug为true时，会alert一些参数
***************/
```
uploadImg : function(files, userData, domain, sussFn, errorFn, debug, debugHtmlSelector) {
    // domain = "http://o_ce1.haowanyou.com";
    if(debug == 2) $(debugHtmlSelector).html('');
    // console.log('enter uploadImg');
    if(debug == 1) alert('enter uploadImg');
    if(debug == 2) $(debugHtmlSelector).append('enter uploadImg');
    if (!files ) {
        return;
    }
    // var file = files[0];
    var imgSize = files.size;
    // if (! ( /^image\/.*$/i.test(file.type) ) ) {
    // alert("! ( /^image\/.*$/i.test(file.type)=true " + file.type);
    // continue; // 不是图片 就跳出这一次循环
    // }
    var imgDomObj = $("<img src='' path='' />");
    // 实例化FileReader API
    if(imgSize > 3145728){
        if(errorFn) errorFn('SIZE_LIMIT');
        return;
    }
    try{
        var freader = new FileReader();
        if(typeof freader.readAsDataURL==='undefined'){
            if(debug == 1) alert("当前浏览器不支持FileReader.readAsDataURL");
            if(debug == 2) $(debugHtmlSelector).append("当前浏览器不支持FileReader.readAsDataURL");
        }else{
            if(debug == 1) alert("当前浏览器支持FileReader.readAsDataURL");
            if(debug == 2) $(debugHtmlSelector).append("当前浏览器支持FileReader.readAsDataURL");
        }
        freader.readAsDataURL(files);
        if(debug == 1) alert(JSON.stringify(freader));
        if(debug == 2) $(debugHtmlSelector).append(JSON.stringify(freader));
        freader.onerror = function(){
            if(debug == 1) alert('enter onerror');
            if(debug == 2) $(debugHtmlSelector).append('enter onerror');
        }
        freader.onloadend  = function(){
            if(debug == 1) alert('enter onloadend ');
            if(debug == 2) $(debugHtmlSelector).append('enter uploadend');
        }
        freader.onloadstart  = function(){
            if(debug == 1) alert('enter onloadstart ');
            if(debug == 2) $(debugHtmlSelector).append('enter onloadstart ');
        }
        freader.onprogress  = function(){
            if(debug == 1) alert('enter onprogress ');
            if(debug == 2) $(debugHtmlSelector).append('enter onprogress ');
        }
        freader.onload = function(e) {
            if(debug == 1) alert('enter onload');
            if(debug == 2) $(debugHtmlSelector).append('enter onload');
            var _baseCode = e.target.result;
            var baseCode = e.target.result.split(',')[1];
            var protocol = "http";
            if (window.location.protocol == "https:" ){
                protocol = "https";
            }
            var img = new Image();
            img.src = freader.result;
            img.onload = function(){
                if(debug == 1) alert('enter Image onload');
                if(debug == 2) $(debugHtmlSelector).append('enter Image onload');
                if(debug == 2) $(debugHtmlSelector).append(JSON.stringify(userData));
                var width = img.width,
                height = img.height;
                console.log(width, height);
                console.log(imgSize);
                imgSuffix ='.' + _baseCode.substring(_baseCode.indexOf('/') + 1, _baseCode.indexOf(';'));
                 
                /* 这里写上传的行为 */
                
            }
        }
    }catch(err){
        console.log(err);
        if(debug == 1) alert(err);
        if(debug == 2) $(debugHtmlSelector).append(err);
    }
},



很久以前写的代码，将就用吧

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

请问点击按钮怎么获取上传的图片?

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

为什么在谷歌浏览器中 'a' == ['a'] 返回 true？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

请问zustand的slice里面的属性，如何配置TypeScript类型约束？