HTML5 JQUERY使用token验证，通过api上传图片到图床 EasyImages2.0

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
 
<body>
<!--上传文件-->
<div id="uploadDiv">
    <form id="uploadForm" enctype="multipart/form-data">
        文件:<input id="file" type="file" name="image"/>
        <input type="text" style="display: none" name="token" value="8d1dbbf08efdfba61af9667a4d3d4efb"/>
    </form>
    <button id="upload">上传文件</button>
</div>
 
<!--结果运用-->
<div id="resFrom">
    <form id="resForm" enctype="multipart/form-data">
 
 
        图片地址：<input type="text" id="url" name="url" value="图片地址">
        <br>
        缩略图地址：<input type="text" id="thumb" name="thumb" value="缩略图地址">
        <br>
        删除链接：<input type="text" id="delUrl" name="del" value="缩略图地址">
    </form>
 
</div>
 
<!--图片展示-->
<div id="imgDiv">
    <img id='img1' src=""/>
 
</div>
 
<!--js代码-->
<script type="text/javascript">
    $(function () {
        $("#upload").click(function () {
            var token = '8d1dbbf08efdfba61af9667a4d3d4efb'
            var formData = new FormData($('#uploadForm')[0]);
            $.ajax({
                type: 'post',
                url: "http://192.168.1.221:8081/api/index.php", //上传文件的请求路径必须是绝对路劲
                data: formData,
                cache: false,
                processData: false,
                contentType: false,
                success: (res) => {
                    $('#img1').attr('src', res.url);
                    $('#imgs').append()
                    $('#url').attr('value', res.url);
                    $('#thumb').attr('value', res.thumb);
                    $('#delUrl').attr('value', res.del);
                },
                error: () => {
                    console.log("失败");
                }
            });
        });
    });
</script>
 
</body>
</html>

　　

作者：上官飞鸿

出处：https://www.cnblogs.com/jackadam/p/16401967.html

版权：本作品采用「知识共享-署名-非商业性-禁止演绎(CC-BY-NC-ND)」许可协议进行许可。

posted @   上官飞鸿  阅读(91)  评论(0)  编辑  收藏  举报
相关博文：
·  python使用token验证，通过api上传图片到图床 EasyImages2.0
·  Odoo 15 JavaScript 参考：OWL 视图、WebClient、服务和钩子 assets列表
·  FastAPI 图片上传接口
·  PHP开发总结
·  Typora+PicGo(app)+Github
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
more_horiz
keyboard_arrow_up light_mode palette
选择主题
点击右上角即可分享
微信分享提示
SQL AI 助手