Layui+vue 批量上传图片和显示列表
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, init
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ifast - 文件管理器</title>
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="shortcut icon" href="favicon.ico">
<link href="/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="/css/animate.css" rel="stylesheet">
<link href="/css/layui.css" rel="stylesheet">
<link href="/css/style.css?v=4.1.0" rel="stylesheet">
<style>
.layui-form-label { width: 9%;line-height: 54px; text-align: left;}
</style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content" id="app">
<div class="row">
<div class="col-sm-12" style=" padding: 0 4%; text-align: center;" >
<div class="layui-form-item">
<!-- <label class="layui-form-label">批量上传图片</label> -->
<div class="layui-input-block">
<button type="button" class="layui-btn" id="test1">
<i class="layui-icon"></i>选择图片（最多选择20张，单张图片最大为10M）
</button>
<button type="button" class="layui-btn" id="test9">开始上传</button>
<button type="button" class="layui-btn" id="cleanImgs"> <i class="fa fa-trash-o fa-lg"></i>清空图片预览</button>
</div>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px; text-align: left;">
上传成功预览：
<div class="layui-upload-list" id="demo2"></div>
</blockquote>
</div>
<input type="text" id="imgUrls" name="imgUrls" style="display: none;" class="layui-input">
</div>
</div>
<div class="row">
<div class="col-sm-12 animated fadeInRight">
<div class="row">
<div class="col-sm-12" style=" padding: 0 4%;">
<div class="file-box" v-for="row in rows">
<div class="file">
<a href="#">
<span class="corner"></span>
<div class="image">
<img alt="image" class="img-responsive" :src="row.urlimg">
</div>
<div class="file-name">
<br/>
<small>{{row.createDate}}</small>
</div>
<button
class="btn btn-warning btn-xs copy" :url="row.urlimg">复制
</button>
<button class="btn btn-danger btn-xs" @click="remove(row.id)" title="暂不可删除">删除 </button>
</a>
</div>
</div>
<div id="incomeNum"></div>
</div>
</div>
<div style="text-align: center;">
<ul id="page"></ul>
</div>
</div>
</div>
</div>
<!-- 全局js -->
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/bootstrap-paginator.min.js"></script>
<script src="/js/content.js?v=1.0.0"></script>
<script src="/js/layui.js"></script>
<script src="/js/plugins/clipboard/clipboard.min.js"></script>
<script src="/js/plugins/layer/layer.min.js"></script>
<script src="/js/vue.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
total: 0,
file: '',
type: '',
rows: '',
pageInfo : {},
pageNumber:1,
pageSize: 14,
},
methods: {
getData: function () {
$.getJSON("/common/sysFile/mutillist", {
type: this.type,
pageNumber : this.pageNumber,
pageSize : this.pageSize
}, function (r) {
app.total = r.data.total;
app.rows = r.data.records;
app.pageInfo = r.data;
app.page();
});
},
page: function () {
var options = {
currentPage: app.pageInfo.current, //当前页
totalPages: app.pageInfo.pages, //总页数
numberofPages: 4, //显示的页数
bootstrapMajorVersion: 3,
alignment: 'center',
size: 'large',
shouldShowPage: true,
itemTexts: function (type, page, current) { //修改显示文字
switch (type) {
case "first":
return "首页";
case "prev":
return "上一页";
case "next":
return "下一页";
case "last":
return "尾页";
case "page":
return page;
}
},
onPageClicked: function (event, originalEvent, type, page) {
app.pageNumber = page;
app.getData();
}
};
$('#page').bootstrapPaginator(options);
},
remove: function (id) {
layer.confirm('确定要删除选中的记录？', {
btn: ['确定', '取消']
}, function () {
$.ajax({
url: "/common/sysFile/mutilremove",
type: "post",
data: {
'id': id
},
success: function (r) {
if (r.code == 0) {
layer.msg(r.msg);
app.getData();
} else {
layer.msg(r.msg);
}
}
});
})
}
},
created: function () {
this.getData();
}
});
</script>
<script type="text/javascript">
var clipboard = new Clipboard('button.copy', {
text: function (trigger) {
layer.msg('文件路径已复制到粘贴板');
return $(trigger).attr('url');
}
});
/**
* 图片上传数量及其大小等控制
* 点击开始上传按钮(test9)，执行上传
*/
var success=0;
var fail=0;
var imgurls="";
$(function (){
var imgsName="";
layui.use(['upload','layer'],function() {
var upload = layui.upload;
var layer=layui.layer;
upload.render({
elem: '#test1',
url: '/common/sysFile/mutilupload',
multiple: true,
auto:false,
// 上传的单个图片大小
size:10240,
// 最多上传的数量
number:20,
// MultipartFile file 对应，layui默认就是file,要改动则相应改动
field:'file',
bindAction: '#test9',
before: function(obj) {
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result) {
$('#demo2').append('<img src="' + result
+ '" alt="' + file.imgname
+'"height="92px" width="92px" class="layui-upload-img uploadImgPreView">')
});
},
done: function(res, index, upload) {
//每个图片上传结束的回调，成功的话，就把新图片的名字保存起来，作为数据提交
if(res.code=="1"){
fail++;
}else{
success++;
imgurls=imgurls+""+res.data.src+",";
$('#imgUrls').val(imgurls);
}
app.getData();//调用vue中的方法
},
allDone:function(obj){
layer.msg("总共要上传图片总数为："+(fail+success)+"\n"
+"其中上传成功图片数为："+success+"\n"
+"其中上传失败图片数为："+fail
)
}
});
});
//清空预览图片
cleanImgsPreview();
});
/**
* 清空预览的图片及其对应的成功失败数
* 原因：如果已经存在预览的图片的话，再次点击上选择图片时，预览图片会不断累加
* 表面上做上传成功的个数清0，实际后台已经上传成功保存了的，只是没有使用，以最终商品添加的提交的为准
*/
function cleanImgsPreview(){
$("#cleanImgs").click(function(){
success=0;
fail=0;
$('#demo2').html("");
$('#imgUrls').val("");
});
}
</script>
</body>
</html>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)