上传图片到smms图床（整合layer上传插件） by：小灰灰

上传图片到smms（整合layer上传插件） by：小灰灰

备注：没有走后端，直接走的前端

说明：

上传图片到smms

smms api说明：https://sm.ms/doc/

使用layui上传插件，插件说明：https://www.layui.com/doc/modules/upload.html

 

上传结果如图所示：

上传图片到smms图床（整合layer上传插件） by：小灰灰

代码说明：

使用layui的上传插件， 直接走smms的api地址：

url：https://sm.ms/api/upload，

参数：smfile，

方法：post

上传成功后返回图片的各种信息以及一个可以删除存储于smms的地址，如果执行（访问此地址，图片将从smms服务器上删除）

 

直接上代码：

PHP
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://layui.hcwl520.com.cn/layui/css/layui.css">
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://layui.hcwl520.com.cn/layui/layui.js"></script>
 
</head>
<body>
<div class="layui-form-item">
    <div class="layui-input-inline">
        <button type="button" class="layui-btn layui-btn-danger" id="gpic1"><i class="layui-icon"></i>上传图片</button>
    </div>
    <div class="layui-input-inline" id="lookpic"></div>
    <div class="layui-input-inline" id="lookpic2"></div>
</div>
 
<div class="layui-upload">
    <button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件</button>
    <div class="layui-upload-list">
        <table class="layui-table">
            <thead>
            <tr><th>文件名</th>
                <th>大小</th>
                <th>状态</th>
                <th>操作</th>
            </tr></thead>
            <tbody id="demoList"></tbody>
        </table>
    </div>
    <button type="button" class="layui-btn" id="testListAction">开始上传</button>
</div>
 
</body>
</html>
<script>
    layui.use(['form', 'layedit', 'laydate', 'element', 'upload'], function() {
        var form = layui.form,
            layer = layui.layer,
            laydate = layui.laydate,
            layedit = layui.layedit,
            upload = layui.upload;
 
            //执行上传图片（简单上传模式）
            var uploadInst = upload.render({
                elem: '#gpic1',
                accept: 'images',
                field:"smfile",
                size: 2048,
                url: 'https://sm.ms/api/upload',
                done: function(res) {
                    console.log(res);
                },
                error: function() {
                    layer.closeAll('loading'); //关闭loading
                    //请求异常回调
                }
            });
 
        //多文件列表示例（稍微复杂一丁点的事例）
        var demoListView = $('#demoList')
            ,uploadListIns = upload.render({
            elem: '#testList'
            ,url: 'https://sm.ms/api/upload'
            ,accept: 'images'
            ,field:"smfile"
            ,multiple: true
            ,auto: false
            ,bindAction: '#testListAction'
            ,choose: function(obj){
                var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                //读取本地文件
                obj.preview(function(index, file, result){
                    $('#lookpic').html('<img name = "s_pmt_dw" style="width: 120px;"src="' + result + '" class="layui-upload-img">');
                    var tr = $(['<tr id="upload-'+ index +'">'
                        ,'<td>'+ file.name +'</td>'
                        ,'<td>'+ (file.size/1014).toFixed(1) +'kb</td>'
                        ,'<td>等待上传</td>'
                        ,'<td>'
                        ,'<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>'
                        ,'<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>'
                        ,''
                        ,'</td>'
                        ,'</tr>'].join(''));
 
                    //单个重传
                    tr.find('.demo-reload').on('click', function(){
                        obj.upload(index, file);
                    });
 
                    //删除
                    tr.find('.demo-delete').on('click', function(){
                        delete files[index]; //删除对应的文件
                        tr.remove();
                        uploadListIns.config.elem.next()[0].value = '';
                    });
 
                    demoListView.append(tr);
                });
            }
            ,done: function(res, index, upload){
                if(res.code == 'success'){ //上传成功
                    $('#lookpic2').html('<img name = "s_pmt_dw" style="width: 120px;"src="' + res.data.url + '" class="layui-upload-img">');
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                    tds.eq(3).html('<button class="layui-btn layui-btn-xs layui-btn-danger demo-deletein">删除ing</button>');
                    //上传成功后执行删除smms的文件
                    tr.find('.demo-deletein').on('click', function(){
                        $.ajax({
                            type: "GET",
                            url: res.data.delete,
                            success: function(data){
                                if(data.indexOf("File delete success.") >= 0 ){
                                    layer.msg("删除成功");
                                }else{
                                    layer.msg("删除失败或图片不存在或已经被删除了！！");
                                }
                                delete index;
                                tr.remove();
                            }
                        });
                    });
                }else{
                    this.error(index, upload);
                }
 
            }
            ,error: function(index, upload){
                var tr = demoListView.find('tr#upload-'+ index)
                    ,tds = tr.children();
                tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
                tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
            }
        });
 
    });
 
</script>

 

 

 

 

 

觉得好的话记得打赏赞助小灰灰哦，小灰灰灰更有动力的，谢谢

小灰灰

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论：1   其中：访客  1   博主  0

    • avatar 更好 0 来自天朝的朋友 谷歌浏览器 Windows 7 广东省佛山市 电信
      回复 2019年4月30日 下午4:00  沙发

      :?: :?: :sad: :evil: :razz: :?: :smile: :!: 有