thinkphp6多图上传
文章描述：
thinkphp6多张图片上传，保存在一个字段里面
<!DOCTYPE html>
<html>
<head>
<title>thinkphp6多图上传</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Bootstrap -->
<link href="/static/bootstrap-3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="/static/jquery/jquery-2.1.4.min.js"></script>
<script src="/static/bootstrap-3.4.1/js/bootstrap.min.js"></script>
<style>
/* 上传附件按钮 */
.add-button-ui {
width: 40px;
height: 40px;
background: #46b8ef;
border-radius: 40px;
position: relative;
cursor: pointer;
}
.add-button-ui::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 2px;
background: #fff;
margin: -1px 0 0 -10px;
}
.add-button-ui::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 2px;
height: 20px;
background: #fff;
margin: -10px 0 0 -1px;
}
/* 自定义上传按钮 */
.upload-img-ui{
margin: 10px 0 0 0;
width: 60px;
height: 60px;
background: #fff;
text-align: center;
border-radius: 5px;
line-height: 60px;
color: #fff;
cursor: pointer;
position: relative;
border: 2px solid #eee;
}
.upload-img-ui::after{
content:"";
width: 30px;
height: 2px;
position: absolute;
top:50%;
left: 50%;
margin: -1px 0 0 -15px;
background: #eee;
}
.upload-img-ui::before{
content:"";
width: 2px;
height: 30px;
position: absolute;
top:50%;
left: 50%;
margin: -15px 0 0 -1px;
background: #eee;
}
/* 图片预览 */
#img{ max-width: 100%; }
.imgList{
display: flex;
justify-content: flex-start;
}
.imgList .item{
min-width: 200px;
}
.imgList .item .thumb{
max-width: 100px;
min-height: 100px;
margin-bottom: 5px;
}
.imgList .item .thumb img{
width: 100%;
}
.imgList .item .date{
margin-bottom: 10px;
}
.imgList .item .del{
width:auto;
height: 30px;
line-height: 30px;
font-size: 14px;
background: #ee3148;
color: #fff;
display: inline-block;
padding: 0 10px;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<div style="display:flex;">
<div class="imgList">
</div>
<div class="add-button-ui"></div>
</div>
<div>
<textarea id="MaterialFrom_img_arr" class="form-control" rows="3"></textarea>
</div>
</div>
<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">上传</h4>
</div>
<div class="modal-body">
<div style="padding: 40px 40px;">
<div class="form-group">
<label for="papersname">证件名称</label>
<input type="text" class="form-control" id="papersname" placeholder="请输入证件名称">
</div>
<div class="form-group">
<label for="startDate">生效日期</label>
<input type="text" class="form-control" id="startDate" placeholder="请输入生效日期">
</div>
<div class="form-group">
<label for="endDate">截止日期</label>
<input type="text" class="form-control" id="endDate" placeholder="请输入截止日期">
</div>
<div class="form-group">
<label for="inputfile">图片上传</label>
<div class="upload-img-ui" id="inputfile"></div>
</div>
<div class="form-group">
<label for="file">图片预览</label>
<div class="form-group">
<img id="img" src="" />
</div>
<div style="display: none;">
<input type="file" id="file" name="file">
</div>
</div>
<!-- 证件循环 -->
<div class="thumb_list">
</div>
<div class="form-group" style="display: none;">
<label for="name">图片地址</label>
<input type="text" id="imgurl" class="form-control" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" class="btn btn-primary" id="submit">
确定
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>
<script>
$(function () {
console.log('loading')
// 读取值
var arrList = '';
$('#MaterialFrom_img_arr').val(arrList)
if(arrList){
arrList = JSON.parse(arrList)
foreach(arrList)
}
})
function foreach(arr) {
var html="";
$.each(arr,function(key,val){
html+='<div class="item">' +
'<div class="thumb"><img src="'+val.img+'"/></div>' +
'<div class="date">证件名称:'+val.papersname+'</div>' +
'<div class="date">生效日期:'+val.startDate+'</div>' +
'<div class="date">截止日期:'+val.endDate+'</div>' +
'<div class="del"><span data-id="'+key+'">删除</span></div>'+
'</div>';
});
$(".imgList").empty()
$(".imgList").append(html);
$('.del').on('click',function(){
var thisBtn = $(this);
var xid = thisBtn.find('span').attr('data-id')
var arrdel = JSON.parse($('#MaterialFrom_img_arr').val())
arrdel.splice(xid,1);
$('#MaterialFrom_img_arr').val(JSON.stringify(arrdel));
foreach(arrdel)
})
}
</script>
<script>
$(function () {
/* 上传图片 */
$('.upload-img-ui').on('click',function(){
$('#file').click()
})
$("#file").change(function(e) {
var file = $("#file").get(0).files[0];
if(file){
var formData = new FormData();
formData.append('img', $('#file')[0].files[0]);
var str = window.location.href
var index = str.indexOf("index.php")
var path_url = str.substring(0, index);
$.ajax( {
url: "{:url('index/upload')}",
type: 'POST',
dataType: "json",
async: false,
cache: false,
data: formData,
processData: false,
contentType: false,
success: function(data) {
console.log(path_url + data.img)
$('#img').attr('src',path_url+data.img)
},
error: function(data) {
}
})
}
})
/* push对象 */
$('#submit').on('click',function(){
let papersname = $('#papersname').val();
let startDate = $('#startDate').val();
let endDate = $('#endDate').val();
let img = $('#img').attr('src')
let obj = {
papersname:papersname,
startDate:startDate,
endDate:endDate,
img:img
}
// console.log(obj)
var imgArr = []
if($('#MaterialFrom_img_arr').val()){
let imgStr = $('#MaterialFrom_img_arr').val()
let imgStrx = JSON.parse(imgStr)
imgStrx.push(obj)
imgArr = imgStrx
}else{
imgArr.push(obj)
}
// each start
var html="";
$.each(imgArr,function(key,val){
html+='<div class="item">' +
'<div class="thumb"><img src="'+val.img+'"/></div>' +
'<div class="date">名称:'+val.papersname+'</div>' +
'<div class="date">生效日期:'+val.startDate+'</div>' +
'<div class="date">截止日期:'+val.endDate+'</div>' +
'<div class="del"><span data-id="'+key+'">删除</span></div>'+
'</div>';
});
$(".imgList").empty()
$(".imgList").append(html);
$('.del').on('click',function(){
var thisBtn = $(this);
var xid = thisBtn.find('span').attr('data-id')
console.log(xid)
var arrdel = JSON.parse($('#MaterialFrom_img_arr').val())
arrdel.splice(xid,1);
console.log(arrdel)
$('#MaterialFrom_img_arr').val(JSON.stringify(arrdel));
foreach(arrdel)
})
// each end
$('#MaterialFrom_img_arr').val(JSON.stringify(imgArr))
$('#myModal').modal('hide')
$('#papersname').val('');
$('#startDate').val('');
$('#endDate').val('');
$('#img').attr('src','')
$('#file').val()
})
/* 显示模态框 */
$('.add-button-ui').on('click',function(){
$('#myModal').modal('show')
})
})
</script>
</body>
</html>
发布时间：2023/08/31
发表评论