以下是我使用layui开发的页面,现在有个问题,页面有4个上传多图的地方,上传后提交表单,有时候会出现,明明上传一个图片,但是最后保存了是2张图片,以下是具体代码,请帮我分析:
<?php
use backend\helper\RouterHelper;
use common\helper\HtmlHelper;
?>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend><?php if ($data['id'] ?? 0): ?>编辑<?php else: ?>新增<?php endif; ?></legend>
</fieldset>
<style>
.layui-form-label {
width: 120px
}
.layui-form-label.required:after { /* 这种写法也可以*/
content: ' *';
color: red;
}
.form-section {
margin-bottom: 20px;
}
.form-section .layui-form-item {
margin-bottom: 10px;
}
.layui-form-label.required:after { /* 这种写法也可以*/
content: ' *';
color: red;
}
.subtitle {
text-align: left;
font-size: 14px;
color: #999999;
margin-left: 110px;
margin-bottom: 10px;
font-style: italic;
}
.alink {
color: #1155cc;text-decoration: underline;
}
</style>
<form class="layui-form" action="">
<input type="hidden" name="id" value="<?= HtmlHelper::encode($data['id'] ?? 0) ?>">
<div class="layui-form-item">
<label class="layui-form-label required">APP</label>
<div class="layui-input-inline">
<select name="app_id" lay-filter="selectApp" id="App"
lay-verify="required" <?= HtmlHelper::encode(isset($data['id']) ? 'disabled' : '') ?> lay-search="">
<option value="">请选择</option>
<?php foreach ($appList as $k => $v): ?>
<option value="<?= HtmlHelper::encode($v['id']) ?>"
<?php if (($data['app_id'] ?? '') == $v['id']) : ?>selected<?php endif; ?> ><?= HtmlHelper::encode($v['app']) ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label required">APP版本</label>
<div class="layui-input-inline">
<input type="text" lay-verify="required" placeholder="请输入版本号" class="layui-input" name="app_version" value="<?= HtmlHelper::encode($data['app_version'] ?? '') ?>">
</div>
</div>
<div id="android_box" style="display: none">
<!-- 第一块 -->
<fieldset class="layui-elem-field">
<legend>加密库版本升级到1.2.8<span style="color: red">截图</span></legend>
<div class="layui-field-box">
<div class="layui-form-item subtitle">
<div>提供Android Studio中项目External Libraries截图</div>
<div>集成Adjust sdk的版本,升级到1.2.7-adjust</div>
<div>示例 <a target="_blank" href="https://sites.google.com/drojian.dev/buyuserproject/home#h.o98qxxyr0ta3" class="alink">加密库版本截图参考</a></div>
<div>配图必填</div>
</div>
<div class="layui-form-item" id="pasteArea1">
<label class="layui-form-label required">配图</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="upload1">
<i class="layui-icon"></i> 多图上传
</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;" >
预览图(可 复制粘贴 上传):
<div id="preview1" class="layui-upload-list"></div>
</blockquote>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<input type="text" name="remark1" placeholder="请输入备注" class="layui-input"
value="<?= HtmlHelper::encode($data['android']['apply_content'][0]['remark'] ?? '')?>">
</div>
</div>
</div>
</fieldset>
<!-- 第二块 -->
<fieldset class="layui-elem-field">
<legend>Firebase后台Custom Definitions 添加自定义纬度cus_user_type<span style="color: red">截图</span></legend>
<div class="layui-field-box">
<div class="layui-form-item subtitle">
<div>Firebase后台-Custom Definitions查看</div>
<div>示例 <a target="_blank" href="https://sites.google.com/drojian.dev/buyuserproject/home#h.36ewz9vyt2f3" class="alink">自定义纬度cus_user_type截图示例</a></div>
<div>配图必填</div>
</div>
<div class="layui-form-item" id="pasteArea2">
<label class="layui-form-label required">配图</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="upload2">
<i class="layui-icon"></i> 多图上传
</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;" >
预览图(可 复制粘贴 上传):
<div id="preview2" class="layui-upload-list"></div>
</blockquote>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<input type="text" name="remark2" placeholder="请输入备注" class="layui-input"
value="<?= HtmlHelper::encode($data['android']['apply_content'][1]['remark'] ?? '')?>">
</div>
</div>
</div>
</fieldset>
<!-- 第三块 -->
<fieldset class="layui-elem-field">
<legend>Firebase埋点包含用户属性cus_user_type<span style="color: red">截图</span></legend>
<div class="layui-field-box">
<div class="layui-form-item subtitle">
<div>DebugView查看埋点</div>
<div>示例 <a target="_blank" href="https://sites.google.com/drojian.dev/buyuserproject/home#h.w9h7so4i2f6t" class="alink">埋点中用户属性截图示例</a></div>
<div>配图必填</div>
</div>
<div class="layui-form-item" id="pasteArea3">
<label class="layui-form-label required">配图</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="upload3">
<i class="layui-icon"></i> 多图上传
</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;" >
预览图(可 复制粘贴 上传):
<div id="preview3" class="layui-upload-list"></div>
</blockquote>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<input type="text" name="remark3" placeholder="请输入备注" class="layui-input"
value="<?= HtmlHelper::encode($data['android']['apply_content'][2]['remark'] ?? '')?>">
</div>
</div>
</div>
</fieldset>
<!-- 第四块 -->
<fieldset class="layui-elem-field" id="pasteArea4">
<legend>含订阅购买的项目KPI后台订阅数据<span style="color: red">截图</span></legend>
<div class="layui-field-box">
<div class="layui-form-item subtitle">
<div>不含内购订阅付费的项目,写 无</div>
<div>包含内购订阅付费的项目,请下方贴<a target="_blank" href="https://kpi.drojian.dev/tools/subscription/index" class="alink">KPI后台截图</a></div>
<div>示例 <a target="_blank" href="https://sites.google.com/drojian.dev/buyuserproject/home#h.w9h7so4i2f6t" class="alink">KPI后台订阅数据截图示例</a></div>
<div>配图备注二选一</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">配图</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="upload4">
<i class="layui-icon"></i> 多图上传
</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;" >
预览图(可 复制粘贴 上传):
<div id="preview4" class="layui-upload-list"></div>
</blockquote>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<input type="text" name="remark4" placeholder="请输入备注" class="layui-input"
value="<?= HtmlHelper::encode($data['android']['apply_content'][3]['remark'] ?? '')?>">
</div>
</div>
</div>
</fieldset>
<!-- 第五块 -->
<!-- <fieldset class="layui-elem-field" id="pasteArea5">-->
<!-- <legend>买量且有广告,是否已支持广告高价值上报</legend>-->
<!-- <div class="layui-field-box">-->
<!-- <div class="layui-form-item subtitle">-->
<!-- <div>目前不支持的,请随版本更新,参考文档;广告高价值上报,集成和验证流程</div>-->
<!-- <div>首次集成开发按文档自测下即可,无需测试再介入</div>-->
<!-- <div>买量审核报告里,已支持的项目 提供<a target="_blank" href="https://sites.google.com/drojian.dev/buyuserproject/home#h.otbzojf69uzh" class="alink">Promoter.highvalueAdunitId 己赋值截图</a></div>-->
<!-- <div>不能提供截图的请填写备注</div>-->
<!-- </div>-->
<!-- <div class="layui-form-item">-->
<!-- <label class="layui-form-label">配图</label>-->
<!-- <div class="layui-input-block">-->
<!-- <button type="button" class="layui-btn" id="upload5">-->
<!-- <i class="layui-icon"></i> 多图上传-->
<!-- </button>-->
<!-- <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;" >-->
<!-- 预览图(可 复制粘贴 上传):-->
<!-- <div id="preview5" class="layui-upload-list"></div>-->
<!-- </blockquote>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="layui-form-item">-->
<!-- <label class="layui-form-label">备注</label>-->
<!-- <div class="layui-input-block">-->
<!-- <input type="text" name="remark5" placeholder="请输入备注" class="layui-input"-->
<!-- value="--><?php //= HtmlHelper::encode($data['android']['apply_content'][4]['remark'] ?? '')?><!--">-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </fieldset>-->
</div>
<div id="ios_box" style="display: none">
<!-- 第一块 -->
<fieldset class="layui-elem-field">
<legend>已经集成广告库(core库,无论是否有广告),确保引入<span style="color: red">adsupport</span>库</legend>
<div class="layui-field-box">
<div class="layui-form-item subtitle">
<div><a target="_blank" href="https://docs.google.com/document/d/1hVzKejSHXuCwOYnJ7G4TM5yIQW5CIY9iawrsMLmDbsE/edit?tab=t.0#heading=h.1j8a389bhq40" class="alink">简版广告库集成文档</a></div>
<div>示例 <a target="_blank" href="https://sites.google.com/drojian.dev/buyuserprojectios/home#h.o98qxxyr0ta3" class="alink">广告库集成截图示例</a></div>
<div>配图必填</div>
</div>
<div class="layui-form-item" id="pasteAreaIos1">
<label class="layui-form-label required">配图</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="upload_ios_1">
<i class="layui-icon"></i> 多图上传
</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
预览图(可 复制粘贴 上传):
<div id="preview_ios_1" class="layui-upload-list"></div>
</blockquote>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<input type="text" name="remark_ios_1" placeholder="请输入备注" class="layui-input"
value="<?= HtmlHelper::encode($data['ios']['apply_content'][0]['remark'] ?? '')?>">
</div>
</div>
</div>
</fieldset>
<!-- 第二块 -->
<fieldset class="layui-elem-field">
<legend>含订阅购买的项目KPI后台订阅数据<span style="color: red">截图</span></legend>
<div class="layui-field-box">
<div class="layui-form-item subtitle">
<div>不含内购订阅付费的项目,写 无</div>
<div>包含内购订阅付费的项目,请下方贴<a target="_blank" href="https://kpi.drojian.dev/tools/subscription/index" class="alink">KPI后台截图</a></div>
<div>示例 <a target="_blank" href="https://sites.google.com/drojian.dev/buyuserprojectios/home#h.mv52gg6wuva3" class="alink">KPI后台订阅数据截图示例</a></div>
<div>配图备注二选一</div>
</div>
<div class="layui-form-item" id="pasteAreaIos2">
<label class="layui-form-label">配图</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="upload_ios_2">
<i class="layui-icon"></i> 多图上传
</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
预览图(可 复制粘贴 上传):
<div id="preview_ios_2" class="layui-upload-list"></div>
</blockquote>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<input type="text" name="remark_ios_2" placeholder="请输入备注" class="layui-input"
value="<?= HtmlHelper::encode($data['ios']['apply_content'][1]['remark'] ?? '')?>">
</div>
</div>
</div>
</fieldset>
<!-- 第三块 -->
<fieldset class="layui-elem-field">
<legend>使用meta买量的项目,集成meta埋点贴<span style="color: red">截图</span></legend>
<div class="layui-field-box">
<div class="layui-form-item subtitle">
<div><a target="_blank" href="https://docs.google.com/document/d/1FHD3LtJDSCVuzIBuSzfixM_0kbFVACwnwjiq6KYX1ME/edit?usp=sharing" class="alink">Meta集成文档</a></div>
<div>只有yoga需要带上并贴上meta后台埋点上报截图,其他买量项目写“无”</div>
<div>示例 <a target="_blank" href="https://sites.google.com/drojian.dev/buyuserproject/home#h.w9h7so4i2f6t" class="alink">埋点中用户属性截图示例</a></div>
<div>配图备注二选一</div>
</div>
<div class="layui-form-item" id="pasteAreaIos3">
<label class="layui-form-label">配图</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="upload_ios_3">
<i class="layui-icon"></i> 多图上传
</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
预览图(可 复制粘贴 上传):
<div id="preview_ios_3" class="layui-upload-list"></div>
</blockquote>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<input type="text" name="remark_ios_3" placeholder="请输入备注" class="layui-input"
value="<?= HtmlHelper::encode($data['ios']['apply_content'][2]['remark'] ?? '')?>">
</div>
</div>
</div>
</fieldset>
<!-- 第四块 -->
<fieldset class="layui-elem-field">
<legend>使用adjust归因的项目,集成adjust SDK<span style="color: red">截图</span></legend>
<div class="layui-field-box">
<div class="layui-form-item subtitle">
<div><a target="_blank" href="https://docs.google.com/document/d/1lvt7-mHZhoVAtohGsEdjuPKfeOW-a7PAWLzYFXqoX60/edit?usp=sharing" class="alink">Adjust集成文档</a></div>
<div>EZ Health外的小账号都要带上并贴上adjust归因后台上报截图,EZ Health账号写“无”</div>
<div>示例 <a target="_blank" href="https://sites.google.com/drojian.dev/buyuserprojectios/home#h.n2rws2ewu0zb" class="alink">adjust后台数据截图示例</a></div>
<div>配图备注二选一</div>
</div>
<div class="layui-form-item" id="pasteAreaIos4">
<label class="layui-form-label">配图</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="upload_ios_4">
<i class="layui-icon"></i> 多图上传
</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
预览图(可 复制粘贴 上传):
<div id="preview_ios_4" class="layui-upload-list"></div>
</blockquote>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<input type="text" name="remark_ios_4" placeholder="请输入备注" class="layui-input"
value="<?= HtmlHelper::encode($data['ios']['apply_content'][3]['remark'] ?? '')?>">
</div>
</div>
</div>
<!-- 第五块 -->
<fieldset class="layui-elem-field">
<legend>使用appflyer归因的项目,集成appflyer SDK<span style="color: red">截图</span></legend>
<div class="layui-field-box">
<div class="layui-form-item subtitle">
<div><a target="_blank" href="https://docs.google.com/document/d/1dEhckmNa8RNYLYlsb68tI92Zi_JyExHJgrG64YIN_7c/edit?usp=sharing" class="alink">Appflyer集成文档</a></div>
<div>EZ Health账号的App都要带上并贴上appflyer归因后台上报截图,其他小账号写“无”</div>
<div>示例 <a target="_blank" href="https://sites.google.com/drojian.dev/buyuserprojectios/home#h.ybrf8ei0n8tb" class="alink">appflyer后台数据截图示例</a></div>
<div>配图备注二选一</div>
</div>
<div class="layui-form-item" id="pasteAreaIos5">
<label class="layui-form-label">配图</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="upload_ios_5">
<i class="layui-icon"></i> 多图上传
</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">
预览图(可 复制粘贴 上传):
<div id="preview_ios_5" class="layui-upload-list"></div>
</blockquote>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">备注</label>
<div class="layui-input-block">
<input type="text" name="remark_ios_5" placeholder="请输入备注" class="layui-input"
value="<?= HtmlHelper::encode($data['ios']['apply_content'][4]['remark'] ?? '')?>">
</div>
</div>
</div>
</fieldset>
</div>
<div class="layui-form-item" style="padding-bottom: 150px; display: <?= HtmlHelper::encode($data['display'] ?? 'block')?>;">
<div class="layui-input-block">
<button type="button" class="layui-btn" id="btn-sub" lay-submit="" lay-filter="saveData">立即提交</button>
</div>
</div>
</form>
<script>
layui.use(['form', 'util', 'laydate', 'upload', 'element', 'layer'], function () {
var form = layui.form;
var upload = layui.upload;
var element = layui.element;
var $ = layui.$;
var layer = layui.layer;
var select_app_platform = 0;
var app_platform = <?= $data['app_platform'] ?? 0 ?>;
var uploadImageList
// 监听普通上传提交
var uploadConfig = function (uploadId, previewId, imgKey) {
return upload.render({
elem: '#' + uploadId,
url: '<?= $UploadAjax ?>',
multiple: true, // 多图上传
// accept: 'images',
// acceptMime: 'image/*',
// exts: 'jpg|png|jpeg',
choose: function (obj) {
obj.preview(function (previewIndex, file, result) {
// 确保图片列表已初始化
if (!uploadImageList[imgKey]) {
uploadImageList[imgKey] = []; // 初始化为空数组
}
console.log(imgKey, 'imgKey');
console.log(previewId, 'previewId');
// 添加图片到预览区域
addPreviewImage(previewId, imgKey, result, file.name);
});
},
done: function (res) {
if (res.errno == 1) {
element.progress('filter-demo', '0%');
return layer.msg(res.message, { icon: 2 });
}
// 确保图片列表已初始化
if (!uploadImageList[imgKey]) {
uploadImageList[imgKey] = []; // 初始化为空数组
}
// 上传成功后,存储图片 URL
uploadImageList[imgKey].push(res.data.url);
console.log('上传成功后的图片列表:', uploadImageList);
},
error: function () {
console.log('上传失败');
}
});
};
//粘贴事件处理函数
function handlePasteEvent(areaId, index, platform) {
document.querySelector(areaId).addEventListener('paste', function (e) {
let loadIndex = layer.load(0);
let items = (e.clipboardData || e.originalEvent.clipboardData).items;
for (let i = 0; i < items.length; i++) {
if (items[i].type.indexOf('image') !== -1) {
let blob = items[i].getAsFile();
let reader = new FileReader();
reader.onload = function (e) {
// 确保图片列表已初始化
if (!uploadImageList[index]) {
uploadImageList[index] = []; // 初始化为空数组
}
console.log('blob', blob);
// 准备上传
let formData = new FormData();
let fileName = blob.lastModified + '_' + blob.name; // 默认生成文件名
formData.append("file", blob, fileName);
// 添加图片到预览区域
let previewStr = (platform === 'ios') ? 'preview_ios_' : 'preview';
// console.log(previewStr + (index + 1), 'previewStr');
// console.log(index, 'index');
addPreviewImage(previewStr + (index + 1), index, e.target.result, fileName);
$.ajax({
url: "<?= $UploadAjax ?>", // 上传的目标 URL
type: "POST", // 请求类型
data: formData, // 请求的数据
processData: false, // 告诉 jQuery 不要处理数据
contentType: false, // 不设置 Content-Type,浏览器会自动设置适当的类型
async: false, // 设置为同步请求
success: function(res) {
console.log("文件上传成功:", res);
if (!res.data || !res.data.url) {
console.error('上传失败:', res.message || '未知错误');
return layer.msg(res.message || '上传失败', { icon: 2 });
}
// 上传成功,更新图片列表
let imageUrl = res.data.url; // 获取返回的图片 URL
uploadImageList[index].push(imageUrl);
console.log('上传成功后的图片列表:', uploadImageList);
layer.close(loadIndex)
},
error: function(xhr, status, error) {
layer.msg('上传失败', { icon: 2 });
console.log("上传失败:", status, error);
layer.close(loadIndex)
}
});
};
// 读取粘贴的图片数据
reader.readAsDataURL(blob);
}
}
layer.close(loadIndex)
});
}
// 初始化图片模块
if(app_platform === 1){
select_app_platform = 1;
uploadImageList = <?= json_encode(array_map(function ($content) {
return $content['images'] ?? [];
}, $data['android']['apply_content'] ?? [])) ?>;
console.log(uploadImageList);
$("#ios_box").css("display", "none");
$("#android_box").css("display", "block");
// 回显每个模块的图片
['preview1', 'preview2', 'preview3', 'preview4', 'preview5'].forEach(function (previewId, index) {
echoImages(previewId, index);
});
// 配置上传模块
['upload1', 'upload2', 'upload3', 'upload4', 'upload5'].forEach(function (uploadId, index) {
uploadConfig(uploadId, 'preview' + (index + 1), index);
});
['#pasteArea1', '#pasteArea2', '#pasteArea3', '#pasteArea4', '#pasteArea5'].forEach(function (areaId, index) {
handlePasteEvent(areaId, index, 'Android');
});
}else if (app_platform === 2){
select_app_platform = 2;
uploadImageList = <?= json_encode(array_map(function ($content) {
return $content['images'] ?? [];
}, $data['ios']['apply_content'] ?? [])) ?>;
console.log(uploadImageList);
$("#android_box").css("display", "none");
$("#ios_box").css("display", "block");
// 回显每个模块的图片
['preview_ios_1', 'preview_ios_2', 'preview_ios_3', 'preview_ios_4', 'preview_ios_5'].forEach(function (previewId, index) {
echoImages(previewId, index);
});
// 配置上传模块
['upload_ios_1', 'upload_ios_2', 'upload_ios_3', 'upload_ios_4', 'upload_ios_5'].forEach(function (uploadId, index) {
uploadConfig(uploadId, 'preview_ios_' + (index + 1), index);
});
['#pasteAreaIos1', '#pasteAreaIos2', '#pasteAreaIos3', '#pasteAreaIos4', '#pasteAreaIos5'].forEach(function (areaId, index) {
handlePasteEvent(areaId, index, 'ios');
});
}
// app切换
form.on('select(selectApp)', function(data){
res = ajaxGet("<?= $indexAjax ?>?app_id="+data.value+"&get_app_info=1");
console.log(res);
if(res.platform === 1){
select_app_platform = 1;
uploadImageList = [];
$("#ios_box").css("display", "none");
$("#android_box").css("display", "block");
// 配置上传模块
['upload1', 'upload2', 'upload3', 'upload4', 'upload5'].forEach(function (uploadId, index) {
uploadConfig(uploadId, 'preview' + (index + 1), index);
});
['#pasteArea1', '#pasteArea2', '#pasteArea3', '#pasteArea4', "#pasteArea5"].forEach(function (areaId, index) {
handlePasteEvent(areaId, index, 'Android');
});
uploadImageList = [];
}else if (res.platform === 2){
select_app_platform = 2;
uploadImageList = [];
$("#android_box").css("display", "none");
$("#ios_box").css("display", "block");
// 配置上传模块
['upload_ios_1', 'upload_ios_2', 'upload_ios_3', 'upload_ios_4', 'upload_ios_5'].forEach(function (uploadId, index) {
uploadConfig(uploadId, 'preview_ios_' + (index + 1), index);
});
['#pasteAreaIos1', '#pasteAreaIos2', '#pasteAreaIos3', '#pasteAreaIos4', '#pasteAreaIos5'].forEach(function (areaId, index) {
handlePasteEvent(areaId, index, 'ios');
});
}
});
// 回显图片逻辑
function echoImages(previewId, imgKey) {
if (uploadImageList[imgKey] && uploadImageList[imgKey].length > 0) {
// 清空当前预览区域,避免重复渲染
$(`#${previewId}`).empty();
// 遍历图片列表,重新生成 DOM
uploadImageList[imgKey].forEach(function (url, index) {
let uniqueId = `img-${imgKey}-${index}`;
// 添加预览图(可 复制粘贴/拖动 上传)片和删除按钮
$(`#${previewId}`).append(
`<div id="${uniqueId}" style="position: relative; display: inline-block; margin: 5px;">
<img src="${url}" alt="图片预览" style="width: 90px; height: 90px; display: block;">
<button type="button" class="delete-button layui-btn layui-btn-sm layui-btn-danger"
data-img-key="${imgKey}" data-img-index="${index}"
style="position: absolute; top: 0; right: 0; padding: 2px 5px; font-size: 12px; z-index: 10;">删除</button>
</div>`
);
});
// 删除按钮事件绑定
$(`#${previewId}`).off('click', '.delete-button').on('click', '.delete-button', function () {
let imgKey = $(this).data('img-key'); // 获取模块键
let imgIndex = $(this).data('img-index'); // 获取图片索引
// 从 uploadImageList 中移除对应图片
if (uploadImageList[imgKey] && imgIndex >= 0) {
uploadImageList[imgKey].splice(imgIndex, 1); // 删除指定索引的图片
}
// 重新渲染该模块的所有图片
echoImages(previewId, imgKey);
console.log('删除后的图片列表:', uploadImageList);
});
} else {
// 如果列表为空,清空预览区域
$(`#${previewId}`).empty();
}
}
/**
* 添加预览图(可 复制粘贴/拖动 上传)片和删除按钮
*/
function addPreviewImage(previewId, imgKey, imgUrl, imgName) {
console.log(imgKey, 'data-img-key');
console.log(uploadImageList[imgKey], 'data-uploadImageList');
let index = uploadImageList[imgKey].length; // 当前图片索引
let uniqueId = `img-${imgKey}-${index}`; // 唯一标识
console.log(index, 'data-img-index');
// 添加预览图(可 复制粘贴/拖动 上传)片和删除按钮
$(`#${previewId}`).append(
`<div id="${uniqueId}" style="position: relative; display: inline-block; margin: 5px;">
<img src="${imgUrl}" alt="${imgName}" style="width: 90px; height: 90px; display: block;">
<button type="button" class="delete-button layui-btn layui-btn-sm layui-btn-danger"
data-img-key="${imgKey}" data-img-index="${index}"
style="position: absolute; top: 0; right: 0; padding: 2px 5px; font-size: 12px; z-index: 10;">删除</button>
</div>`
);
// 删除按钮事件
bindDeleteEvent(previewId, imgKey);
}
/**
* 绑定删除按钮事件
*/
function bindDeleteEvent(previewId, imgKey) {
$(`#${previewId}`).off('click', '.delete-button').on('click', '.delete-button', function () {
const imgIndex = $(this).data('img-index'); // 获取图片索引
console.log('删除图片的索引:', imgIndex);
// 确保图片数组存在且索引有效
if (uploadImageList[imgKey] && imgIndex >= 0) {
// 删除指定图片
uploadImageList[imgKey].splice(imgIndex, 1);
// 重新渲染预览区域,更新所有图片和索引
refreshPreview(previewId, imgKey);
}
console.log('删除后的图片列表:', uploadImageList);
});
}
/**
* 刷新预览区域
*/
function refreshPreview(previewId, imgKey) {
// 清空当前预览区域
$(`#${previewId}`).empty();
// 遍历图片列表,重新生成 DOM
uploadImageList[imgKey].forEach(function (url, index) {
const uniqueId = `img-${imgKey}-${index}`; // 唯一标识
// 添加预览图(可 复制粘贴/拖动 上传)片和删除按钮
$(`#${previewId}`).append(
`<div id="${uniqueId}" style="position: relative; display: inline-block; margin: 5px;">
<img src="${url}" alt="图片预览" style="width: 90px; height: 90px; display: block;">
<button type="button" class="delete-button layui-btn layui-btn-sm layui-btn-danger"
data-img-key="${imgKey}" data-img-index="${index}"
style="position: absolute; top: 0; right: 0; padding: 2px 5px; font-size: 12px; z-index: 10;">删除</button>
</div>`
);
});
// 重新绑定删除事件
bindDeleteEvent(previewId, imgKey);
}
//提交事件
form.on('submit(saveData)', function (data) {
console.log(uploadImageList);
console.log(data);
// 获取每个块的输入数据
let formData;
if(select_app_platform === 1){
// if(uploadImageList.length < 4){
// layer.msg('缺少配图,请补全', {icon: 2});
// return false;
// }
let applyContents = {};
for (let i = 0; i < 4; i++) {
applyContents[i] = {
remark: data.field[`remark${i + 1}`],
images: uploadImageList[i] ?? []
};
}
formData = {
id: data.field.id,
app_id: data.field.app_id,
app_version: data.field.app_version,
apply_content: JSON.stringify(applyContents)
};
// apply_content 第 0 1 2 images 不能为空 第3个 remark images 必须有一个 有值
let applyContent = formData.apply_content ? JSON.parse(formData.apply_content) : {};
let isValid = true;
let errorMessage = '';
// 验证规则
for (let i = 0; i < 4; i++) {
let item = applyContent[i] || {};
if (i === 3) {
// 第3个: remark 或 images 至少有一个有值
if (!item.remark && (!item.images || item.images.length === 0)) {
isValid = false;
errorMessage = '第'+ (i + 1) + '项的备注或配图至少有一个必填';
break;
}
} else {
// 第0、1、2个: images 不能为空
if (!item.images || item.images.length === 0) {
isValid = false;
errorMessage = '第'+ (i + 1) + '项的配图不能为空';
break;
}
}
}
// 如果验证不通过,提示用户
if (!isValid) {
layer.msg(errorMessage, {icon: 2});
return false; // 阻止表单提交
}
}else{
// if(uploadImageList.length < 5){
// layer.msg('缺少配图,请补全', {icon: 2});
// return false;
// }
let applyContents = {};
for (let i = 0; i < 5; i++) {
applyContents[i] = {
remark: data.field[`remark_ios_${i + 1}`],
images: uploadImageList[i] ?? []
};
}
formData = {
id: data.field.id,
app_id: data.field.app_id,
app_version: data.field.app_version,
apply_content: JSON.stringify(applyContents)
};
// apply_content 第 0 images 不能为空 第1234个 remark images 必须有一个 有值
let applyContent = formData.apply_content ? JSON.parse(formData.apply_content) : {};
let isValid = true;
let errorMessage = '';
// 验证规则
for (let i = 0; i < 5; i++) {
let item = applyContent[i] || {};
if (i > 0) {
// 第1234个 remark images 必须有一个 有值
if (!item.remark && (!item.images || item.images.length === 0)) {
isValid = false;
errorMessage = '第'+ (i + 1) + '项的备注或配图至少有一个必填';
break;
}
} else {
// 第 0 images 不能为空
if (!item.images || item.images.length === 0) {
isValid = false;
errorMessage = '第'+ (i + 1) + '项的配图不能为空';
break;
}
}
}
// 如果验证不通过,提示用户
if (!isValid) {
layer.msg(errorMessage, {icon: 2});
return false; // 阻止表单提交
}
}
//将数据打印到控制台
// console.log(11111111);
// console.log('提交的数据:', formData);
// console.log(11111111);
// return false;
res = ajaxPost("<?= $SaveUrl ?>", formData)
if (res !== false) {
window.location.href = "<?= $indexUrl ?>";
}
return false;
});
});
</script>