前端留言需要多文件上傳和多字段上傳如何寫(xiě)代碼？
時(shí)間：2025-06-24 訪問(wèn)量：0
在外貿(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,
<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="請(qǐng)上傳身份證正面" 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="請(qǐng)上傳身份證反面" 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>
第二步：我們來(lái)看JS代碼,JS代碼主要是用于上傳文件的代碼，基于layui的
layui.use(['element','upload'], function(){
var element = layui.element;
var upload = layui.upload;
//執(zhí)行單圖片實(shí)例
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ā)生錯(cuò)誤!');
}
});
//執(zhí)行單圖片實(shí)例
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ā)生錯(cuò)誤!');
}
});
//執(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個(gè)文件！');
return false;
}
});
},
progress: function(n, elem, e) {
// n是百分比，如50表示50%
// elem是當(dāng)前文件的dom元素
// 你可以用layer.msg，或者自己寫(xiě)個(gè)進(jìn)度條顯示
// 簡(jiǎn)單示例：控制臺(tái)輸出進(jìn)度
console.log('上傳進(jìn)度：' + n + '%');
// 或者顯示在頁(yè)面某個(gè)位置，比如用#upload-progress元素顯示
$('#upload-progress').text('上傳進(jìn)度：' + 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('已達(dá)到最多上傳數(shù)量（10個(gè)）！');
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ā)生錯(cuò)誤!');
}
});
});需要注意的問(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)}
<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}
