前端留言需要多文件上傳和多字段上傳如何寫代碼？
時間：2025-06-24 訪問量：0
在外貿(mào)網(wǎng)站建設(shè)中，我們會遇到有客戶說需要用戶前端留言的時候可以上傳自定義的文件或者圖片等資料。
那么這篇文章一定可以幫到您。
我們基于bootstarp框架以及l(fā)ayui框架在pb中來實現(xiàn)這樣的效果。
效果類似如下圖。
需要上傳身份證正反兩面，以及多文件上傳。
第一：前端HTML代碼，請注意幾個數(shù)字的位置，比如說：upload1, ico1,ico_box1, 然后是upload5,ico5,ico_box5,這是兩個單圖上傳的，然后是相關(guān)證據(jù)的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">相關(guān)證據(jù)傳單</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;
//執(zhí)行單圖片實例
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'); //關(guān)閉loading
if(res.code==1){
$('#ico').val('的網(wǎng)址 '+res.data[0]);
$('#ico_box').html("<img src='"+res.data[0]+"' width=80 >");
layer.msg('上傳成功！');
}else{
layer.msg('上傳失?。?#39;+res.data);
}
}
,error: function(){
layer.closeAll('loading'); //關(guān)閉loading
layer.msg('上傳發(fā)生錯誤!');
}
});
//執(zhí)行單圖片實例
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'); //關(guān)閉loading
if(res.code==1){
$('#ico5').val('http://您的網(wǎng)址'+res.data[0]);
$('#ico_box5').html("<img src='"+res.data[0]+"' width=80 >");
layer.msg('上傳成功！');
}else{
layer.msg('上傳失?。?#39;+res.data);
}
}
,error: function(){
layer.closeAll('loading'); //關(guān)閉loading
layer.msg('上傳發(fā)生錯誤!');
}
});
//執(zhí)行上傳多文件功能
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://您的網(wǎng)址' + res.data[0];
var files = oldVal ? oldVal.split(',') : [];
if (files.length >= 10) {
layer.msg('已達到最多上傳數(shù)量（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('上傳失?。?#39; + res.data);
}
},
error: function(){
layer.closeAll('loading');
layer.msg('上傳發(fā)生錯誤!');
}
});
});需要注意的問題是，這里上傳后的多文件，是多個文件的絕對地址以逗號的方式串連起來的。
所以我們在后臺需要將這個字段解析出來。
由于后臺在添加多文件這個字段的時候，我們選擇的是附件。
所以在后臺Message的文件標識中是：
{if($value2->type==4)}找到他的詳情位置并修改：
我們通過JS的方法來拆分上面留言時串聯(lián)的數(shù)據(jù)段。
拆分后可以得到獨立的A標簽鏈接。方便后臺查詢相關(guān)文檔。
{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}
