60 lines
2.8 KiB
HTML
60 lines
2.8 KiB
HTML
{{define "style"}}
|
||
<link href="/static/css/index.css" rel="stylesheet">
|
||
{{end}}
|
||
{{define "content"}}
|
||
<div class="card text-center">
|
||
<div class="card-header" style="background-color: #fcf8e3">
|
||
<h4>图片上传</h4>
|
||
</div>
|
||
<div class="card-body" style="border-style:dashed; border-color:#98bf21; display: block">
|
||
<input type="file" class="form-control-file" id="upload-input-file" style="display:none;">
|
||
<div id="upload-btn-click">
|
||
<div style="height: 80px"></div>
|
||
<div class="ant-upload-drag-container">
|
||
<p class="ant-upload-drag-icon"><img src="/static/img/add.svg"></p>
|
||
<p class="ant-upload-text" style="font-size: 14px; margin: 0;">拖拽文件到此区域或<span
|
||
style="color: rgb(26, 102, 255);">点此上传</span></p>
|
||
<p class="ant-upload-hint" style="font-size: 12px; margin: 4px 0 0;">
|
||
只支持上传图片文件，最大支持2M，上传后支持复制url</p>
|
||
</div>
|
||
<div style="height: 80px"></div>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="card-footer text-muted" style="background-color: #fcf8e3">
|
||
<div class="container">
|
||
<div class="row" id="preview">
|
||
<div class="col-sm">
|
||
<div class="card" style="width: 14rem;">
|
||
<img src="http://img.520touxiang.com/uploads/allimg/2016063019/4b1sswvy0mj.jpg" class="card-img-top" alt="">
|
||
<div class="card-body">
|
||
<p>http://img.520touxiang.com/uploads/allimg/2016063019/4b1sswvy0mj.jpg</p>
|
||
<button type="button" class="btn btn-primary img-copy-url-btn">复制链接</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-sm">
|
||
<div class="card" style="width: 14rem;">
|
||
<img src="http://img.520touxiang.com/uploads/allimg/2016063019/4b1sswvy0mj.jpg" class="card-img-top" alt="">
|
||
<div class="card-body">
|
||
<p>http://img.520touxiang.com/uploads/allimg/2016063019/4b1sswvy0mj.jpg</p>
|
||
<button type="button" class="btn btn-primary img-copy-url-btn">复制链接</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{{end}}
|
||
|
||
{{define "script"}}
|
||
{{noRender `<script id="tpl-image" type="text/html">
|
||
<div class="card" style="width: 18rem;">
|
||
<img src="{{ url }}" class="card-img-top" alt="...">
|
||
<div class="card-body">
|
||
<button type="button" class="btn btn-primary">点击复制按钮</button>
|
||
</div>
|
||
</div>
|
||
</script>`}}
|
||
<script src="/static/js/index.js"></script>
|
||
{{end}} |