津市市前端留言需要上傳多個(gè)文件的時(shí)候，包括ZIP，PDF，DOC等不同格式文件
時(shí)間：2025-08-31 來(lái)源：津市市外貿(mào)網(wǎng)站建設(shè)
在外貿(mào)網(wǎng)站建設(shè)中，我們會(huì)遇到有客戶說(shuō)需要用戶前端留言的時(shí)候可以上傳自定義的文件或者圖片等資料。
那么這篇文章一定可以幫到您。
我們基于bootstarp框架以及l(fā)ayui框架在pb中來(lái)實(shí)現(xiàn)這樣的效果。
效果類似如下圖。
需要上傳身份證正反兩面，以及多文件上傳。
第一：前端HTML代碼，請(qǐng)注意幾個(gè)數(shù)字的位置，比如說(shuō)：upload1, ico1,ico_box1, 然后是upload5,ico5,ico_box5,這是兩個(gè)單圖上傳的，然后是相關(guān)證據(jù)的ico3，upload3,后臺(tái)添加字段：
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>
第二步：我們來(lái)看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 類型（根據(jù)你需要調(diào)整）
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個(gè)文件！');
return false;
}
});
},
progress: function(n, elem, e) {
console.log('上傳進(jìn)度：' + n + '%');
$('#upload-progress').text('上傳進(jìn)度：' + n + '%');
},
done: function(res){
layer.closeAll('loading');
console.log('上傳返回結(jié)果：', res);
if (res.code === 1) {
var fileUrl = res.data.src; // ? 這里正確提取路徑字段
if (!fileUrl) {
layer.msg('上傳成功，但未獲取到文件路徑！');
return;
}
// 拼接完整路徑（根據(jù)你當(dāng)前的地址調(diào)整）
var fullUrl = 'http://192.168.0.101:2545' + fileUrl;
var oldVal = $('#ico3').val();
var files = oldVal ? oldVal.split(',') : [];
if (files.length >= 10) {
layer.msg('已達(dá)到最多上傳數(shù)量（10個(gè)）！');
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('上傳失?。?#39; + res.data);
}
}
,
error: function(){
layer.closeAll('loading');
layer.msg('上傳發(fā)生錯(cuò)誤!');
}
});
});
</script>需要注意的問(wèn)題是，這里上傳后的多文件，是多個(gè)文件的絕對(duì)地址以逗號(hào)的方式串連起來(lái)的。
所以我們?cè)诤笈_(tái)需要將這個(gè)字段解析出來(lái)。
由于后臺(tái)在添加多文件這個(gè)字段的時(shí)候，我們選擇的是附件。
所以在后臺(tái)Message的文件標(biāo)識(shí)中是：
{if($value2->type==4)}找到他的詳情位置并修改：
我們通過(guò)JS的方法來(lái)拆分上面留言時(shí)串聯(lián)的數(shù)據(jù)段。
拆分后可以得到獨(dú)立的A標(biāo)簽鏈接。方便后臺(tái)查詢相關(guān)文檔。
<!-- 文件 -->
{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文件中添加以下函數(shù)，否則無(wú)法上傳：
// 上傳接口
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'=>"錯(cuò)誤");
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));
}
}以下代碼是改進(jìn)方案，比如說(shuō)上傳了文件之后，發(fā)現(xiàn)錯(cuò)誤的，要重新上傳，需要?jiǎng)h除原來(lái)的文件。
<!-- 1. 上傳組件區(qū)域 -->
<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>
<!-- 上傳進(jìn)度提示 -->
<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', // 限制上傳類型
// 選擇文件前檢查當(dāng)前數(shù)量
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個(gè)文件！');
return false;
}
});
},
// 上傳進(jìn)度回調(diào)
progress: function(n, elem, e) {
$('#upload-progress').text('上傳進(jìn)度：' + n + '%');
},
// 上傳成功
done: function(res){
layer.closeAll('loading');
console.log('上傳返回結(jié)果：', 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; // 根據(jù)實(shí)際情況修改
// 檢查上傳數(shù)量
var oldVal = $('#ico3').val();
var files = oldVal ? oldVal.split(',') : [];
if (files.length >= 10) {
layer.msg('已達(dá)到最多上傳數(shù)量（10個(gè)）！');
return;
}
// 更新隱藏域
$('#ico3').val(oldVal ? oldVal + ',' + fullUrl : fullUrl);
// 生成唯一ID
var fileId = 'file_' + Date.now();
// 顯示上傳結(jié)果
$('#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('上傳失?。?#39; + res.data);
}
},
error: function(){
layer.closeAll('loading');
layer.msg('上傳發(fā)生錯(cuò)誤!');
}
});
// 刪除按鈕點(diǎn)擊事件
$(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(','));
// 移除對(duì)應(yīng)顯示項(xiàng)
$('#' + fileId).remove();
});
});
</script>再大膽一點(diǎn)，我們使用LAYUI拖動(dòng)文件上傳的功能。
<div class="layui-form-item w-100" >
<div class="right-box">
<!-- 隱藏 input 保存上傳路徑 -->
<input type="hidden" name="uploadfile" id="ico3">
<!-- 拖拽上傳區(qū)域 -->
<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>
<!-- 上傳成功展示區(qū)域 -->
<div class="layui-upload-list" id="ico_box3" style="margin-top:10px;"></div>
<!-- 上傳進(jìn)度顯示 -->
<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', // 拖拽區(qū)域綁定
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('上傳結(jié)果：', 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:
