File: /www/wwwroot//bb.cwoyt.com/taocan/index.html
<!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>jQuery图片上传拖拽排序代码 - 站长素材</title>
<link href="layui/css/layui.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<style>
.upload-btn {
width: 40px;
height: 100%;
cursor: pointer !important;
position: relative;
background: url("images/upload.png") no-repeat #007bff;
-webkit-background-size: cover;
background-size: cover;
border: 1px solid #ced4da;
border-left: none;
border-radius: 0 0.25rem 0.25rem 0;
}
.upload-btn .upload-img {
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer !important;
}
</style>
</head>
<body>
<div class="container" id="app">
<div class="row">
<div class="col-md-12">
<!--<form class="" action="upload.php" method="POST">-->
<div class="card">
<div class="card-body">
<table class="table">
<thead>
<tr>
<th width="30%">名称</th>
<th width="50%">图片</th>
<th width="20%">操作</th>
</tr>
</thead>
<tbody id="tbody-items">
<tr v-for="(v,i) in items" class="tr-item">
<td>
<div class="input-group">
<input type="text" class="form-control" name="name" value="" placeholder="套餐名称">
</div>
</td>
<td>
<div class="row">
<div class="col-sm-10">
<div class="input-group" style="position: relative;">
<input type="text" class="form-control" name="pic" value="v.pic" v-model="v.pic"
readonly>
<img src="images/delete.png" height="20"
style="position: absolute;cursor: pointer;top:-10px;right:38px;z-index:999;"
@click="delImg(i)">
<div class="input-group-append">
<div class="upload-btn">
<input class="upload-img" type="file" name="file"
@change="upload($event, i)">
</div>
</div>
</div>
</div>
<div class="col-sm-2 p-0">
<button type="button" class="btn btn-primary p-0 m-0">
<input type="image" class="preview-img" :id="'preview-img-' + (i + 1)"
src="v.pic" height="36" width="36" :layer-src="v.pic"
@click="previewImg(i)" title="点击预览" value="v.pic">
<!--<input type="hidden" class="preview-img" :id="'preview-img-' + (i + 1)"-->
<!-- value="v.pic" > -->
</button>
</div>
</div>
</td>
<td>
<div class="input-group">
<button type="button" class="btn btn-secondary p-0 m-0 move-action mr-2"
style="cursor: move;">
<img src="images/move.png" height="36">
</button>
<button type="button" class="btn btn-danger" @click="del(i)">删除</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="ml-3 mb-3">
<button type="button" class="btn btn-primary" @click="add();">添加套餐</button>
</div>
</div>
<!--</form>-->
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="layer/layer.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<script src="node_modules/sortablejs/Sortable.min.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
items: [],
},
updated() {
var _this = this;
var $tbody = _this.$el.querySelector('#tbody-items');
new Sortable($tbody, {
handle: '#tbody-items .move-action',
onUpdate: function (event) {
//修改items数据顺序
var newIndex = event.newIndex,
oldIndex = event.oldIndex,
$tr = $tbody.children[newIndex],
$oldTr = $tbody.children[oldIndex];
// 先删除移动的节点
$tbody.removeChild($tr);
// 再插入移动的节点到原有节点，还原了移动的操作
if (newIndex > oldIndex) {
$tbody.insertBefore($tr, $oldTr)
} else {
$tbody.insertBefore($tr, $oldTr.nextSibling)
}
// 更新items数组
var item = _this.items.splice(oldIndex, 1);
_this.items.splice(newIndex, 0, item[0]);
},
animation: 150,
})
},
mounted() {
},
methods: {
add() {
this.items.push({
name: '',
pic: '',
});
},
del(pos) {
this.items.splice(pos, 1);
},
upload(event, pos) {
let _this = this;
let file = event.target.files[0];
let fileSize = file.size;
let fileName = file.name;
let fileExt = fileName.substring(fileName.lastIndexOf(".") + 1);
try {
this.checkExt(fileExt);//检测文件后缀
this.checkSize(fileSize);//检测文件大小
let param = new FormData();
param.append("file", file);
let config = {
headers: {"Content-Type": "multipart/form-data"}
};
axios.post('upload.php', param, config).then(function (res) {
if (res.data.code == 1) {
_this.items[pos].pic = res.data.file_url;
$('#preview-img-' + (parseInt(pos) + 1)).attr('layer-src', res.data.file_url);
$('#preview-img-' + (parseInt(pos) + 1)).attr('src', res.data.file_url);
$('#preview-img-' + (parseInt(pos) + 1)).attr('value', res.data.file_url);
} else {
layer.msg(res.data.msg);
}
}).catch(function (err) {
console.log(err);
});
} catch (err) {
layer.msg(err);
}
},
delImg(pos) {
this.items[pos].pic = '';
},
checkExt(ext) {
//上传图片格式
if (!['jpg', 'png', 'jpeg', 'gif', 'bmp'].includes(ext)) {
throw '上传图片格式不正确';
}
},
checkSize(size) {
//限制2M
if (size > 2000 * 1024) {
throw '上传图片大小不能超过2M';
}
},
previewImg(pos) {
let img = $('#preview-img-' + (parseInt(pos) + 1)).attr('layer-src');
if (!img) {
layer.msg('没有可以预览的图片');
return false;
}
layer.photos({
photos: {
"title": "", //相册标题
"id": 'image_preview', //相册id
"start": 0, //初始显示的图片序号，默认0
"data": [ //相册包含的图片，数组格式
{
"alt": "",
"pid": 666, //图片id
"src": img, //原图地址
"thumb": img //缩略图地址
}
]
}, //格式见API文档手册页
anim: 5, //0-6的选择，指定弹出图片动画类型，默认随机
shadeClose: true,
// skin: 'layui-layer-nobg',
shade: [0.5, '#000000'],
shadeClose: true,
});
}
}
});
</script>
</body>
</html>
<style>
.upload-btn {
width: 40px;
height: 100%;
cursor: pointer !important;
position: relative;
background: url("images/upload.png") no-repeat #007bff;
-webkit-background-size: cover;
background-size: cover;
border: 1px solid #ced4da;
border-left: none;
border-radius: 0 0.25rem 0.25rem 0;
}
.upload-btn .upload-img2 {
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer !important;
}
</style>
</head>
<body>
<div class="container" id="app2">
<div class="row">
<div class="col-md-12">
<!--<form class="" action="upload.php" method="POST">-->
<div class="card">
<div class="card-body">
<table class="table">
<thead>
<tr>
<th width="30%">名称</th>
<th width="50%">图片</th>
<th width="20%">操作</th>
</tr>
</thead>
<tbody id="tbody-items2">
<tr v-for="(v,i) in items" class="tr-item">
<td>
<div class="input-group">
<input type="text" class="form-control" name="name" value="">
</div>
</td>
<td>
<div class="row">
<div class="col-sm-10">
<div class="input-group" style="position: relative;">
<input type="text" class="form-control" name="pic" value="v.pic" v-model="v.pic"
readonly>
<img src="images/delete.png" height="20"
style="position: absolute;cursor: pointer;top:-10px;right:38px;z-index:999;"
@click="delImg(i)">
<div class="input-group-append">
<div class="upload-btn">
<input class="upload-img2" type="file" name="file"
@change="upload($event, i)">
</div>
</div>
</div>
</div>
<div class="col-sm-2 p-0">
<button type="button" class="btn btn-primary p-0 m-0">
<input type="image" class="preview-img2" :id="'preview-img2-' + (i + 1)"
src="v.pic" height="36" width="36" :layer-src="v.pic"
@click="previewImg(i)" title="点击预览" value="v.pic">
<!--<input type="hidden" class="preview-img2" :id="'preview-img2-' + (i + 1)"-->
<!-- value="v.pic" > -->
</button>
</div>
</div>
</td>
<td>
<div class="input-group">
<button type="button" class="btn btn-secondary p-0 m-0 move-action2 mr-2"
style="cursor: move;">
<img src="images/move.png" height="36">
</button>
<button type="button" class="btn btn-danger" @click="del(i)">删除</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="ml-3 mb-3">
<button type="button" class="btn btn-primary" @click="add();">添加属性</button>
</div>
</div>
<!--</form>-->
</div>
</div>
</div>
<script>
var app = new Vue({
el: '#app2',
data: {
items: [],
},
updated() {
var _this = this;
var $tbody = _this.$el.querySelector('#tbody-items2');
new Sortable($tbody, {
handle: '#tbody-items2 .move-action2',
onUpdate: function (event) {
//修改items数据顺序
var newIndex = event.newIndex,
oldIndex = event.oldIndex,
$tr = $tbody.children[newIndex],
$oldTr = $tbody.children[oldIndex];
// 先删除移动的节点
$tbody.removeChild($tr);
// 再插入移动的节点到原有节点，还原了移动的操作
if (newIndex > oldIndex) {
$tbody.insertBefore($tr, $oldTr)
} else {
$tbody.insertBefore($tr, $oldTr.nextSibling)
}
// 更新items数组
var item = _this.items.splice(oldIndex, 1);
_this.items.splice(newIndex, 0, item[0]);
},
animation: 150,
})
},
mounted() {
},
methods: {
add() {
this.items.push({
name: '',
pic: '',
});
},
del(pos) {
this.items.splice(pos, 1);
},
upload(event, pos) {
let _this = this;
let file = event.target.files[0];
let fileSize = file.size;
let fileName = file.name;
let fileExt = fileName.substring(fileName.lastIndexOf(".") + 1);
try {
this.checkExt(fileExt);//检测文件后缀
this.checkSize(fileSize);//检测文件大小
let param = new FormData();
param.append("file", file);
let config = {
headers: {"Content-Type": "multipart/form-data"}
};
axios.post('upload.php', param, config).then(function (res) {
if (res.data.code == 1) {
_this.items[pos].pic = res.data.file_url;
$('#preview-img2-' + (parseInt(pos) + 1)).attr('layer-src', res.data.file_url);
$('#preview-img2-' + (parseInt(pos) + 1)).attr('src', res.data.file_url);
$('#preview-img2-' + (parseInt(pos) + 1)).attr('value', res.data.file_url);
} else {
layer.msg(res.data.msg);
}
}).catch(function (err) {
console.log(err);
});
} catch (err) {
layer.msg(err);
}
},
delImg(pos) {
this.items[pos].pic = '';
},
checkExt(ext) {
//上传图片格式
if (!['jpg', 'png', 'jpeg', 'gif', 'bmp'].includes(ext)) {
throw '上传图片格式不正确';
}
},
checkSize(size) {
//限制2M
if (size > 2000 * 1024) {
throw '上传图片大小不能超过2M';
}
},
previewImg(pos) {
let img = $('#preview-img2-' + (parseInt(pos) + 1)).attr('layer-src');
if (!img) {
layer.msg('没有可以预览的图片');
return false;
}
layer.photos({
photos: {
"title": "", //相册标题
"id": 'image_preview', //相册id
"start": 0, //初始显示的图片序号，默认0
"data": [ //相册包含的图片，数组格式
{
"alt": "",
"pid": 666, //图片id
"src": img, //原图地址
"thumb": img //缩略图地址
}
]
}, //格式见API文档手册页
anim: 5, //0-6的选择，指定弹出图片动画类型，默认随机
shadeClose: true,
// skin: 'layui-layer-nobg',
shade: [0.5, '#000000'],
shadeClose: true,
});
}
}
});
</script>
</body>
</html>
<style>
.upload-btn {
width: 40px;
height: 100%;
cursor: pointer !important;
position: relative;
background: url("images/upload.png") no-repeat #007bff;
-webkit-background-size: cover;
background-size: cover;
border: 1px solid #ced4da;
border-left: none;
border-radius: 0 0.25rem 0.25rem 0;
}
.upload-btn .upload-img3 {
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer !important;
}
</style>
</head>
<body>
<div class="container" id="app3">
<div class="row">
<div class="col-md-12">
<!--<form class="" action="upload.php" method="POST">-->
<div class="card">
<div class="card-body">
<table class="table">
<thead>
<tr>
<th width="30%">名称</th>
<th width="50%">图片</th>
<th width="20%">操作</th>
</tr>
</thead>
<tbody id="tbody-items3">
<tr v-for="(v,i) in items" class="tr-item">
<td>
<div class="input-group">
<input type="text" class="form-control" name="name" value="">
</div>
</td>
<td>
<div class="row">
<div class="col-sm-10">
<div class="input-group" style="position: relative;">
<input type="text" class="form-control" name="pic" value="v.pic" v-model="v.pic"
readonly>
<img src="images/delete.png" height="20"
style="position: absolute;cursor: pointer;top:-10px;right:38px;z-index:999;"
@click="delImg(i)">
<div class="input-group-append">
<div class="upload-btn">
<input class="upload-img3" type="file" name="file"
@change="upload($event, i)">
</div>
</div>
</div>
</div>
<div class="col-sm-2 p-0">
<button type="button" class="btn btn-primary p-0 m-0">
<input type="image" class="preview-img3" :id="'preview-img3-' + (i + 1)"
src="v.pic" height="36" width="36" :layer-src="v.pic"
@click="previewImg(i)" title="点击预览" value="v.pic">
<!--<input type="hidden" class="preview-img3" :id="'preview-img3-' + (i + 1)"-->
<!-- value="v.pic" > -->
</button>
</div>
</div>
</td>
<td>
<div class="input-group">
<button type="button" class="btn btn-secondary p-0 m-0 move-action3 mr-2"
style="cursor: move;">
<img src="images/move.png" height="36">
</button>
<button type="button" class="btn btn-danger" @click="del(i)">删除</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="ml-3 mb-3">
<button type="button" class="btn btn-primary" @click="add();">添加属性</button>
</div>
</div>
<!--</form>-->
</div>
</div>
</div>
<script>
var app = new Vue({
el: '#app3',
data: {
items: [],
},
updated() {
var _this = this;
var $tbody = _this.$el.querySelector('#tbody-items3');
new Sortable($tbody, {
handle: '#tbody-items3 .move-action3',
onUpdate: function (event) {
//修改items数据顺序
var newIndex = event.newIndex,
oldIndex = event.oldIndex,
$tr = $tbody.children[newIndex],
$oldTr = $tbody.children[oldIndex];
// 先删除移动的节点
$tbody.removeChild($tr);
// 再插入移动的节点到原有节点，还原了移动的操作
if (newIndex > oldIndex) {
$tbody.insertBefore($tr, $oldTr)
} else {
$tbody.insertBefore($tr, $oldTr.nextSibling)
}
// 更新items数组
var item = _this.items.splice(oldIndex, 1);
_this.items.splice(newIndex, 0, item[0]);
},
animation: 150,
})
},
mounted() {
},
methods: {
add() {
this.items.push({
name: '',
pic: '',
});
},
del(pos) {
this.items.splice(pos, 1);
},
upload(event, pos) {
let _this = this;
let file = event.target.files[0];
let fileSize = file.size;
let fileName = file.name;
let fileExt = fileName.substring(fileName.lastIndexOf(".") + 1);
try {
this.checkExt(fileExt);//检测文件后缀
this.checkSize(fileSize);//检测文件大小
let param = new FormData();
param.append("file", file);
let config = {
headers: {"Content-Type": "multipart/form-data"}
};
axios.post('upload.php', param, config).then(function (res) {
if (res.data.code == 1) {
_this.items[pos].pic = res.data.file_url;
$('#preview-img3-' + (parseInt(pos) + 1)).attr('layer-src', res.data.file_url);
$('#preview-img3-' + (parseInt(pos) + 1)).attr('src', res.data.file_url);
$('#preview-img3-' + (parseInt(pos) + 1)).attr('value', res.data.file_url);
} else {
layer.msg(res.data.msg);
}
}).catch(function (err) {
console.log(err);
});
} catch (err) {
layer.msg(err);
}
},
delImg(pos) {
this.items[pos].pic = '';
},
checkExt(ext) {
//上传图片格式
if (!['jpg', 'png', 'jpeg', 'gif', 'bmp'].includes(ext)) {
throw '上传图片格式不正确';
}
},
checkSize(size) {
//限制2M
if (size > 2000 * 1024) {
throw '上传图片大小不能超过2M';
}
},
previewImg(pos) {
let img = $('#preview-img3-' + (parseInt(pos) + 1)).attr('layer-src');
if (!img) {
layer.msg('没有可以预览的图片');
return false;
}
layer.photos({
photos: {
"title": "", //相册标题
"id": 'image_preview', //相册id
"start": 0, //初始显示的图片序号，默认0
"data": [ //相册包含的图片，数组格式
{
"alt": "",
"pid": 666, //图片id
"src": img, //原图地址
"thumb": img //缩略图地址
}
]
}, //格式见API文档手册页
anim: 5, //0-6的选择，指定弹出图片动画类型，默认随机
shadeClose: true,
// skin: 'layui-layer-nobg',
shade: [0.5, '#000000'],
shadeClose: true,
});
}
}
});
</script>
</body>
</html>