h5上传图片

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
    <title>上传图片</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .waicneg{
            position: relative;
        }
        .beijing{
            width: 100%;
            height: 100vh;
        }
        .update {
            position: absolute;
            /*border: 1px solid red;*/
            top: 34%;
            left: 10%;
            width: 80%;
            height: 49%;
        }

        .update img {
            width: 100%;
            height: 100%;
            /*margin: 1rem;*/
            /*border: 1px solid red;*/
            /*border-radius: 50%;*/
        }

        .update input {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
        }
    </style>
</head>

<body>
<div id="Vue">
    <div class="waicneg">
        <img class="beijing" src="http://sucai.suoluomei.cn/sucai_zs/images/20191028114301-%E4%B8%87%E5%9C%A3%E8%8A%82%E4%B8%8A%E4%BC%A0%E9%A1%B5%E9%9D%A2.jpg" alt="">
        <div class="update">
            <img src="https://sucai.suoluomei.cn/sucai_zs/images/20200117140231-vavav.png" class="tupian" />
            <input type="file" name="avater" id="updateavatar" ref="avatarInput" accept="image/*" />
        </div>
    </div>
</div>

</body>

<script>
    $("#updateavatar").change(function (link) {
        var file = link.target.files[0];
        var formData = new FormData();
        formData.append("file", file);
        formData.append("key", "Gn1xVdBiTClSSHKZifg0pTQSU5XGagWO");
        $.ajax({
            url: "http://api110.herbplantist.com/sucai/public/index.php/post/post/uploadFile",
            type: "post",
            data: formData,
            dataType: 'json',
            contentType: false,
            processData: false,
            success: function (res) {
                console.log(res)
                $('.tupian').attr('src', res.info.url)
            }
        })
    })

</script>

</html>


发布了76 篇原创文章 · 获赞 0 · 访问量 4056
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览