影像上传
This commit is contained in:
parent
24d886cf61
commit
fe1ae8f4c4
|
|
@ -19,8 +19,8 @@ function pages(pageNum, pageSize, typeNum) {
|
|||
console.log(result);
|
||||
if (result.code === 200) {
|
||||
if (result.data) {
|
||||
initTable(result.data.list, result.data.pageSize, result.data.startRow)
|
||||
laypages(result.data.total, result.data.startRow, result.data.pageSize)
|
||||
initTable(result.data, result.limit, result.curr)
|
||||
laypages(result.count, result.curr, result.limit)
|
||||
}
|
||||
} else if (result.code === 500) {
|
||||
layer.alert(result.msg, {icon: 2})
|
||||
|
|
|
|||
|
|
@ -24,6 +24,90 @@ layui.use(['laydate', 'upload'], function () {
|
|||
sourceTypeName: "重要事项及宣传照片" // 来源类型名称
|
||||
})
|
||||
|
||||
// 已上传图片计数
|
||||
var uploadedCount = 0;
|
||||
// 最大允许上传数量
|
||||
var maxCount = 9;
|
||||
// 渲染上传组件
|
||||
upload.render({
|
||||
elem: '#uploadBtn', // 绑定按钮
|
||||
url: '/imgTool/sys/file/uploadFile?token=' + tokens, // 上传接口地址
|
||||
accept: 'images', // 只允许上传图片
|
||||
multiple: true, // 允许多文件上传
|
||||
auto: true, // 选择文件后自动上传
|
||||
number: 9, // 每次最多选择3个文件
|
||||
field: 'files',
|
||||
data: {params: violation},
|
||||
choose: function(obj){ // 选择文件后的回调
|
||||
debugger;
|
||||
// 检查已上传数量
|
||||
var files = obj.pushFile();
|
||||
console.log(files)
|
||||
alert(uploadedCount)
|
||||
// 如果已上传+新选择的数量超过限制
|
||||
alert(files.length)
|
||||
if(uploadedCount + files.length > maxCount){
|
||||
var canUpload = maxCount - uploadedCount;
|
||||
layer.msg('最多上传'+maxCount+'张图片，还可上传'+canUpload+'张');
|
||||
// 截断文件数组，只保留可上传数量
|
||||
this.files = files.slice(0, canUpload);
|
||||
// 如果已经没有可上传数量，则阻止上传
|
||||
if(canUpload <= 0){
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
// 预览图片
|
||||
obj.preview(function(index, file, result){
|
||||
$('#previewBox').append(
|
||||
'<div class="img-item" data-index="'+ index +'" style="display: inline-block; position: relative; margin: 5px 5px" >' +
|
||||
'<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img" style="width: 90px; height: 90px;" >' +
|
||||
'<div class="img-operate">' +
|
||||
'<i class="layui-icon layui-icon-close" onclick="deleteImg('+ index +')"></i>' +
|
||||
'</div>' +
|
||||
'</div>'
|
||||
);
|
||||
});
|
||||
},
|
||||
before: function(obj){
|
||||
// 上传前可以做一些处理
|
||||
},
|
||||
done: function(res, index, upload){
|
||||
// 上传成功回调
|
||||
uploadedCount++;
|
||||
|
||||
// 如果已达到最大数量，禁用上传按钮
|
||||
if(uploadedCount >= maxCount){
|
||||
$('#uploadBtn').addClass('layui-btn-disabled').prop('disabled', true);
|
||||
}
|
||||
|
||||
// 在实际应用中，这里可以处理服务器返回的数据
|
||||
console.log(res);
|
||||
},
|
||||
error: function(index, upload){
|
||||
// 上传失败回调
|
||||
layer.msg('第'+(index+1)+'张图片上传失败');
|
||||
},
|
||||
allDone: function(obj){
|
||||
// 全部上传完成回调
|
||||
console.log('全部上传完成');
|
||||
}
|
||||
});
|
||||
|
||||
// 删除图片函数
|
||||
window.deleteImg = function(index){
|
||||
// 这里应该添加删除服务器上图片的逻辑
|
||||
// 例如通过AJAX请求删除接口
|
||||
// 从预览中移除
|
||||
$('.img-item[data-index="'+ index +'"]').remove();
|
||||
// 减少计数
|
||||
uploadedCount--;
|
||||
// 重新启用上传按钮
|
||||
$('#uploadBtn').removeClass('layui-btn-disabled').prop('disabled', false);
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 多图片上传
|
||||
var uploadcom1 = upload.render({
|
||||
elem: '#test1',
|
||||
|
|
|
|||
|
|
@ -20,8 +20,8 @@ function pages(pageNum, pageSize, typeNum) {
|
|||
console.log(result);
|
||||
if (result.code === 200) {
|
||||
if (result.data) {
|
||||
initTable(result.data.list, result.data.pageSize, result.data.startRow)
|
||||
laypages(result.data.total, result.data.startRow, result.data.pageSize)
|
||||
initTable(result.data, result.limit, result.curr)
|
||||
laypages(result.count, result.curr, result.limit)
|
||||
}
|
||||
} else if (result.code === 500) {
|
||||
layer.alert(result.msg, {icon: 2})
|
||||
|
|
|
|||
|
|
@ -20,8 +20,8 @@ function pages(pageNum, pageSize, typeNum) {
|
|||
console.log(result);
|
||||
if (result.code === 200) {
|
||||
if (result.data) {
|
||||
initTable(result.data.list, result.data.pageSize, result.data.startRow)
|
||||
laypages(result.data.total, result.data.startRow, result.data.pageSize)
|
||||
initTable(result.data, result.limit, result.curr)
|
||||
laypages(result.count, result.curr, result.limit)
|
||||
}
|
||||
} else if (result.code === 500) {
|
||||
layer.alert(result.msg, {icon: 2})
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<!--<div class="layui-form-item">
|
||||
<label class="layui-form-label"><i style="padding: 0 10px;">*</i>照片:</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-upload">
|
||||
|
|
@ -118,6 +118,13 @@
|
|||
</div>
|
||||
<button id="hideUpload1" type="button" style="display: none"></button>
|
||||
</div>
|
||||
</div>-->
|
||||
|
||||
<div class="layui-upload">
|
||||
<button type="button" class="layui-btn" id="uploadBtn">选择图片</button>
|
||||
<div class="layui-upload-list">
|
||||
<div id="previewBox"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" id="formSubmit" class="layui-btn" lay-submit="" lay-filter="formData"
|
||||
|
|
|
|||
Loading…
Reference in New Issue