建德市前端留言需要多文件上传和多字段上传如何写代码？
时间：2025-06-14 来源：建德市外贸网站建设
在外贸网站建设中，我们会遇到有客户说需要用户前端留言的时候可以上传自定义的文件或者图片等资料。
那么这篇文章一定可以帮到您。
我们基于bootstarp框架以及layui框架在pb中来实现这样的效果。
效果类似如下图。
需要上传身份证正反两面，以及多文件上传。
第一：前端HTML代码，请注意几个数字的位置，比如说：upload1, ico1,ico_box1, 然后是upload5,ico5,ico_box5,这是两个单图上传的，然后是相关证据的ico3，upload3,
<div class="layui-form-item"> <label class="layui-form-label"><span>*</span>身份证正面</label> <div class="layui-input-inline"> <input type="text" name="sfzzm" id="ico1" placeholder="请上传身份证正面" required class="layui-input"></div> <button type="button" class="layui-btn upload1 watermark" data-des="ico1"> <i class="layui-icon"></i>上传正面</button> <div class="layui-input-inline-img"> <div id="ico_box1" class="pic addedit"></div> </div> </div> <div class="layui-form-item"> <label class="layui-form-label"><span>*</span>身份证反面</label> <div class="layui-input-inline"> <input type="text" name="sfzfanmian" id="ico5" placeholder="请上传身份证反面" required class="layui-input"></div> <button type="button" class="layui-btn upload5 watermark" data-des="ico5"> <i class="layui-icon"></i>上传反面</button> <div class="layui-input-inline-img"> <div id="ico_box5" class="pic addedit"></div> </div> </div> <div class="layui-form-item" style="display:flex"> <label class="layui-form-label">相关证据传单</label> <div class="right-box"> <div class="layui-input-inline"><input type="hidden" name="baodan" id="ico3"></div> <div class="layui-upload-list" id="demo2"></div> <div class="layui-upload-list" id="ico_box3" class="pic addedit"></div> <div class="clear"> </div> <button type="button" class="layui-btn upload upload3 watermark" id="test2" data-des="ico3" style="margin-left:0"> <i class="layui-icon"></i>上传</button> <span id="upload-progress" style="margin-top:10px;color:#666;">等待上传...</span> <div class="clear"></div> <div class="layui-input-inline-img"> <div class="layui-upload-list" id="demo2"></div> </div> </div> </div>
第二步：我们来看JS代码,JS代码主要是用于上传文件的代码，基于layui的
layui.use(['element','upload'], function(){
var element = layui.element;
var upload = layui.upload;
//执行单图片实例
var uploadInst = upload.render({
elem: '.upload1' //绑定元素
,url: '/index.php?p=/index/upload' //上传接口
,field: 'upload' //字段名称
,multiple: false //多文件上传
,accept: 'images' //接收文件类型 images（图片）、file（所有文件）、video（视频）、audio（音频）
,acceptMime: 'images/*'
,done: function(res){
var item = this.item;
layer.closeAll('loading'); //关闭loading
if(res.code==1){
$('#ico').val('的网址 '+res.data[0]);
$('#ico_box').html("<img src='"+res.data[0]+"' width=80 >");
layer.msg('上传成功！');
}else{
layer.msg('上传失败：'+res.data);
}
}
,error: function(){
layer.closeAll('loading'); //关闭loading
layer.msg('上传发生错误!');
}
});
//执行单图片实例
var uploadInst = upload.render({
elem: '.upload5' //绑定元素
,url: '/index.php?p=/index/upload' //上传接口
,field: 'upload' //字段名称
,multiple: false //多文件上传
,accept: 'images' //接收文件类型 images（图片）、file（所有文件）、video（视频）、audio（音频）
,acceptMime: 'images/*'
,done: function(res){
var item = this.item;
layer.closeAll('loading'); //关闭loading
if(res.code==1){
$('#ico5').val('http://您的网址'+res.data[0]);
$('#ico_box5').html("<img src='"+res.data[0]+"' width=80 >");
layer.msg('上传成功！');
}else{
layer.msg('上传失败：'+res.data);
}
}
,error: function(){
layer.closeAll('loading'); //关闭loading
layer.msg('上传发生错误!');
}
});
//执行上传多文件功能
var uploadInst = upload.render({
elem: '.upload3',
url: '/index.php?p=/index/upload',
field: 'upload',
multiple: true,
accept: 'file',
acceptMime: 'file/*',
choose: function(obj) {
var currentVal = $('#ico3').val();
var fileCount = currentVal ? currentVal.split(',').length : 0;
obj.preview(function(index, file, result) {
if (fileCount >= 10) {
layer.msg('最多只能上传10个文件！');
return false;
}
});
},
progress: function(n, elem, e) {
// n是百分比，如50表示50%
// elem是当前文件的dom元素
// 你可以用layer.msg，或者自己写个进度条显示
// 简单示例：控制台输出进度
console.log('上传进度：' + n + '%');
// 或者显示在页面某个位置，比如用#upload-progress元素显示
$('#upload-progress').text('上传进度：' + n + '%');
},
done: function(res){
layer.closeAll('loading');
if(res.code == 1){
var oldVal = $('#ico3').val();
var newVal = 'http://您的网址' + res.data[0];
var files = oldVal ? oldVal.split(',') : [];
if (files.length >= 10) {
layer.msg('已达到最多上传数量（10个）！');
return;
}
if (oldVal) {
$('#ico3').val(oldVal + ',' + newVal);
} else {
$('#ico3').val(newVal);
}
$('#ico_box3').append("<div style='margin:5px 0;'><a href='"+newVal+"' target='_blank'>此文件上传成功</a></div>");
$('#upload-progress').text('上传完成');
layer.msg('上传成功！');
} else {
layer.msg('上传失败：' + res.data);
}
},
error: function(){
layer.closeAll('loading');
layer.msg('上传发生错误!');
}
});
});需要注意的问题是，这里上传后的多文件，是多个文件的绝对地址以逗号的方式串连起来的。
所以我们在后台需要将这个字段解析出来。
由于后台在添加多文件这个字段的时候，我们选择的是附件。
所以在后台Message的文件标识中是：
{if($value2->type==4)}找到他的详情位置并修改：
我们通过JS的方法来拆分上面留言时串联的数据段。
拆分后可以得到独立的A标签链接。方便后台查询相关文档。
{if($value2->type==4)}
<div class="layui-input-block" id="fielsupload">
<div class="file-links" data-files="[value]"></div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll('.file-links').forEach(function (el) {
var files = el.getAttribute('data-files');
if (files) {
var list = files.split(',');
var html = '';
list.forEach(function (file) {
file = file.trim();
if (file) {
var name = file.substring(file.lastIndexOf('/') + 1);
html += '<a href="' + file + '" target="_blank" class="fieldslist">' + name + '</a>';
}
});
el.innerHTML = html;
}
});
});
</script>
{/if}
TAG:
