h5上传图片

最新推荐文章于 2024-05-28 13:09:47 发布

hy3528

最新推荐文章于 2024-05-28 13:09:47 发布

阅读量147

点赞数

分类专栏： html H5

本文链接：https://blog.csdn.net/hy3528/article/details/105114592

版权

html 同时被 2 个专栏收录

73 篇文章 1 订阅

订阅专栏

16 篇文章 0 订阅

订阅专栏

<!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>

hy3528

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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-...
复制链接

扫一扫