备注:没有走后端,直接走的前端
说明:
上传图片到smms
smms api说明:https://sm.ms/doc/
使用layui上传插件,插件说明:https://www.layui.com/doc/modules/upload.html
上传结果如图所示:
代码说明:
使用layui的上传插件, 直接走smms的api地址:
url:https://sm.ms/api/upload,
参数:smfile,
方法:post
上传成功后返回图片的各种信息以及一个可以删除存储于smms的地址,如果执行(访问此地址,图片将从smms服务器上删除)
直接上代码:
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> |
2019年4月30日 下午4:00 沙发