Api上传图片例子 - 扩展

教程
66 0

[post cid="179" cover="https://nice-pic-cdn-1.ddp.ink/2021/11/19/a241aae7d07d1.png"/]

承接上文

今天看到有个论坛网友咨询我个问题,那么我们就来解决一下

开始

我们先拿到上一篇文章的代码复制下来

image.png

新建 img标签和p标签,然后写点样式

image.png

回到JavaScript部分

image.png

从这一块续写,首先我们知道

图片的连接是:response.data.url

那么只要把 img的标签里的src 替换成这个链接就行了,我们开始。

我们先用原生的写法来写。

先获取元素

image.png

image.png

把img标签 和 p 标签 存在简短的变量中

然后打印一下img

image.png

点开

搜索 src

image.png

我们先改一下src

image.png

image.png

然后我们打印pic.src

image.png

image.png

也就是说,修改pic.src 就等于修改 img里面的src

然后我们到ajax里面去操作

image.png

image.png

成功修改,然后我们网友要求的是 旁边还有个链接。

那么就修改一下p标签

我们先到p标签随便输入点字

image.png

然后打印P标签

image.png

image.png

看到有两个,

innerHTML innerText

关于这两个是什么意思,我先不解释,我们先直接测试。

我们先测试 innerText 也就是 text.innerText

怎么测试呢?

给它赋值,我们给它赋值

image.png

然后打印

image.png

image.png

然后我们在测试innerHTML 方便对比 我多加了一个p标签

image.png

image.png

没有区别,那么我这边再加一个需求,我需要在打印 你好 的时候 旁边+一个按钮。那么就是这样

image.png

image.png

这下,应该就能看出 innerText和innerHTML的区别了吧,innerHTML能够输出Html标签,而innerText只能输出纯文本。所以 我们我们暂时没有输出html标签的需求,所以我们用innerText就行,到ajax里面操作。

image.png

image.png

测试完毕。

附上全部代码


<!DOCTYPE html>
<html lang="en">
<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>演示 - Nice</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>
<body>
    <style>
        img {
            width: 200px;
            height: 200px;
            border-radius: 12px;
        }
        p {
            background-color: #EEE;
            font-size: 21px;
        }
    </style>
    <img src="https://q1.qlogo.cn/g?b=qq&nk=477737679&s=100&t=" alt="">
    <p>测试</p>
    <p class="p2">测试</p>

    <script>
        var pic = document.querySelector('img');
        var text = document.querySelector('p');
        var text2 = document.querySelector('.p2');



    //2.写全局粘贴事件
    $('html').on('paste', function (e) {
    //3.获取文件并打印
        var fil = event.clipboardData.items[0].getAsFile();
    //4.新建构造函数,存到data中
        var data = new FormData();
    //4.1把 fil 放到 data 里面去
        data.append("image",fil);
    //5. 发起Ajax请求上传文件
        $.ajax({
            method: 'POST',// 请求类型 POST
            url: 'https://ddp.ink/api/upload', // api 地址
            data: data, //data是存的图片数据
            dataType: "json",//服务器返回类型为 json
            //contentType 内容的编码类型。为 false 时将不设置 Content-Type。
            contentType: false,
            //processData 是否把传递进来的数据转换成查询字符串发送 设置false 否。
            processData: false,
            //success 成功返回
            success: function (response) {
                //打印成功后返回的数据
                console.log(response);
                console.log(response.data.url);
                pic.src = response.data.url;
                text.innerText = response.data.url;
          
            }
        });
    });
    </script>
</body>
</html>
最后更新 2021-11-27
评论 ( 0 )
OωO
隐私评论