前端留言需要上传多个文件的时候，包括ZIP，PDF，DOC等不同格式文件
时间：2025-08-31 来源：外贸网站建设
在外贸网站建设中，我们会遇到有客户说需要用户前端留言的时候可以上传自定义的文件或者图片等资料。
那么这篇文章一定可以帮到您。
我们基于bootstarp框架以及layui框架在pb中来实现这样的效果。
效果类似如下图。
需要上传身份证正反两面，以及多文件上传。
第一：前端HTML代码，请注意几个数字的位置，比如说：upload1, ico1,ico_box1, 然后是upload5,ico5,ico_box5,这是两个单图上传的，然后是相关证据的ico3，upload3,后台添加字段：
uploadfile
然后HTML代码如下： <div class="layui-form-item" style="display:flex"> <div class="right-box"> <div class="layui-input-inline"><input type="hidden" name="uploadfile" 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的
<script>
layui.use(['element','upload'], function(){
var element = layui.element;
var upload = layui.upload;
var uploadInst = upload.render({
elem: '.upload3', // 绑定上传按钮
url: '/index.php?p=/index/upload', // 上传接口
field: 'upload', // 文件字段名
multiple: true, // 多文件上传
accept: 'file', // 接受文件类型
acceptMime: '.doc,.docx,.pdf,.zip', // 限制上传的文件 MIME 类型（根据你需要调整）
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) {
console.log('上传进度：' + n + '%');
$('#upload-progress').text('上传进度：' + n + '%');
},
done: function(res){
layer.closeAll('loading');
console.log('上传返回结果：', res);
if (res.code === 1) {
var fileUrl = res.data.src; // ✅ 这里正确提取路径字段
if (!fileUrl) {
layer.msg('上传成功，但未获取到文件路径！');
return;
}
// 拼接完整路径（根据你当前的地址调整）
var fullUrl = 'http://192.168.0.101:2545' + fileUrl;
var oldVal = $('#ico3').val();
var files = oldVal ? oldVal.split(',') : [];
if (files.length >= 10) {
layer.msg('已达到最多上传数量（10个）！');
return;
}
$('#ico3').val(oldVal ? oldVal + ',' + fullUrl : fullUrl);
$('#ico_box3').append(`<div style='margin:5px 0;'><a href='${fullUrl}' target='_blank'>${res.data.name}</a></div>`);
$('#upload-progress').text('上传完成');
layer.msg('上传成功！');
} else {
layer.msg('上传失败：' + res.data);
}
}
,
error: function(){
layer.closeAll('loading');
layer.msg('上传发生错误!');
}
});
});
</script>需要注意的问题是，这里上传后的多文件，是多个文件的绝对地址以逗号的方式串连起来的。
所以我们在后台需要将这个字段解析出来。
由于后台在添加多文件这个字段的时候，我们选择的是附件。
所以在后台Message的文件标识中是：
{if($value2->type==4)}找到他的详情位置并修改：
我们通过JS的方法来拆分上面留言时串联的数据段。
拆分后可以得到独立的A标签链接。方便后台查询相关文档。
<!-- 文件 -->
{if($value2->type==4)}
<style>
.file-links a{
display: block;
width: 100%;
}
.file-links a:hover{
color:red;
}
</style>
<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}最后一步也是最重要的一步，一定要在IndexController.php文件中添加以下函数，否则无法上传：
// 上传接口
public function upload()
{
$upload = upload('upload');
if (is_array($upload)) {
json(1, $upload);
} else {
json(0, $upload);
}
}
//
public function uploadAction(){
$file=$_FILES['file'];
$root_url = 'uploadfiles/pic/image/';
if (!is_uploaded_file($file['tmp_name'])){
$data = array('code'=>1,'msg'=>"错误");
exit(json_encode($data,0));
}
$ext = pathinfo($file['name']);
$num=makenum($this->memberinfo['id']);
$root_url.=$num.'/';
if (!is_dir($root_url)) {
mkdir($root_url,0777, true);
}
$pa=file_list::get_file_list($root_url);
$na=count($pa) + 1;
if ($na<10){
$name=$num.'-000'.$na;
}elseif($na<100){
$name=$num.'-00'.$na;
}elseif($na<1000){
$name=$num.'-0'.$na;
}else{
$name=$num.'-'.$na;
}
$n=$root_url.$name.".".$ext['extension'];
$result=move_uploaded_file($file['tmp_name'],$n);
if ($result){
exit(json_encode(array("code"=>0,"msg"=>"ok","file"=>$n,"size"=>$file['size']),0));
}else{
exit(json_encode(array("code"=>1,"msg"=>"false","file"=>$n,"size"=>$file['size']),0));
}
}以下代码是改进方案，比如说上传了文件之后，发现错误的，要重新上传，需要删除原来的文件。
<!-- 1. 上传组件区域 -->
<div class="layui-form-item" style="display:flex">
<div class="right-box">
<!-- 隐藏input用于保存上传路径 -->
<div class="layui-input-inline">
<input type="hidden" name="uploadfile" id="ico3">
</div>
<!-- 显示上传成功的文件 -->
<div class="layui-upload-list" id="ico_box3"></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>
</div>
<!-- 2. JS部分 -->
<script>
layui.use(['element','upload'], function(){
var element = layui.element;
var upload = layui.upload;
var uploadInst = upload.render({
elem: '.upload3', // 上传按钮
url: '/index.php?p=/index/upload', // 上传接口
field: 'upload',
multiple: true,
accept: 'file',
acceptMime: '.doc,.docx,.pdf,.zip', // 限制上传类型
// 选择文件前检查当前数量
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) {
$('#upload-progress').text('上传进度：' + n + '%');
},
// 上传成功
done: function(res){
layer.closeAll('loading');
console.log('上传返回结果：', res);
if (res.code === 1) {
var fileUrl = res.data.src;
var fileName = res.data.name;
if (!fileUrl) {
layer.msg('上传成功，但未获取到文件路径！');
return;
}
var fullUrl = 'http://192.168.0.101:2545' + fileUrl; // 根据实际情况修改
// 检查上传数量
var oldVal = $('#ico3').val();
var files = oldVal ? oldVal.split(',') : [];
if (files.length >= 10) {
layer.msg('已达到最多上传数量（10个）！');
return;
}
// 更新隐藏域
$('#ico3').val(oldVal ? oldVal + ',' + fullUrl : fullUrl);
// 生成唯一ID
var fileId = 'file_' + Date.now();
// 显示上传结果
$('#ico_box3').append(`
<div id="${fileId}" style="margin:5px 0;">
<a href="${fullUrl}" target="_blank">${fileName}</a>
<button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete-file-btn"
data-url="${fullUrl}" data-id="${fileId}" style="margin-left:10px;">删除</button>
</div>
`);
$('#upload-progress').text('上传完成');
layer.msg('上传成功！');
} else {
layer.msg('上传失败：' + res.data);
}
},
error: function(){
layer.closeAll('loading');
layer.msg('上传发生错误!');
}
});
// 删除按钮点击事件
$(document).on('click', '.delete-file-btn', function() {
var fileUrl = $(this).data('url');
var fileId = $(this).data('id');
// 更新 hidden input 中的值
var val = $('#ico3').val();
var list = val.split(',').filter(function(item) {
return item !== fileUrl;
});
$('#ico3').val(list.join(','));
// 移除对应显示项
$('#' + fileId).remove();
});
});
</script>再大胆一点，我们使用LAYUI拖动文件上传的功能。
<div class="layui-form-item w-100" >
<div class="right-box">
<!-- 隐藏 input 保存上传路径 -->
<input type="hidden" name="uploadfile" id="ico3">
<!-- 拖拽上传区域 -->
<div class="layui-upload-drag w-100" id="drag-upload-area">
<i class="layui-icon"></i>
<div>Click to upload, or drag and drop the file here</div>
</div>
<!-- 上传成功展示区域 -->
<div class="layui-upload-list" id="ico_box3" style="margin-top:10px;"></div>
<!-- 上传进度显示 -->
<span id="upload-progress" style="margin-top:10px;color:#666;display:block;">Waiting for upload.....</span>
</div>
</div>
<script>
layui.use(['upload', 'layer'], function(){
var upload = layui.upload;
var layer = layui.layer;
// 拖拽上传渲染
upload.render({
elem: '#drag-upload-area', // 拖拽区域绑定
url: '/index.php?p=/index/upload',
field: 'upload',
multiple: true,
accept: 'file',
acceptMime: '.doc,.docx,.pdf,.zip',
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('You can only upload a maximum of 10 files！');
return false;
}
});
},
progress: function(n, elem, e) {
$('#upload-progress').text('Progress：' + n + '%');
},
done: function(res){
layer.closeAll('loading');
console.log('上传结果：', res);
if (res.code === 1) {
var fileUrl = res.data.src;
var fileName = res.data.name;
if (!fileUrl) {
layer.msg('上传成功，但未获取到文件路径！');
return;
}
var fullUrl = '{hmcms:httpurl}' + fileUrl;
var oldVal = $('#ico3').val();
var files = oldVal ? oldVal.split(',') : [];
if (files.length >= 10) {
layer.msg('The maximum upload limit (10 files) has been reached！');
return;
}
$('#ico3').val(oldVal ? oldVal + ',' + fullUrl : fullUrl);
var fileId = 'file_' + Date.now();
$('#ico_box3').append(`
<div id="${fileId}" style="margin:5px 0;">
<a href="${fullUrl}" target="_blank">${fileName}</a>
<button type="button" class="layui-btn layui-btn-xs layui-btn-danger delete-file-btn"
data-url="${fullUrl}" data-id="${fileId}" style="margin-left:10px;">Delete</button>
</div>
`);
$('#upload-progress').text('Upload completed!');
layer.msg('Upload successful！');
} else {
layer.msg('Upload failed：' + res.data);
}
},
error: function(){
layer.closeAll('loading');
layer.msg('An error occurred during uploading!');
}
});
// 删除上传的文件
$(document).on('click', '.delete-file-btn', function() {
var fileUrl = $(this).data('url');
var fileId = $(this).data('id');
var val = $('#ico3').val();
var list = val.split(',').filter(function(item) {
return item !== fileUrl;
});
$('#ico3').val(list.join(','));
$('#' + fileId).remove();
});
});
</script>
TAG:
