国产一区AV直播|精品高清无码一区二区|欧美人人操人人看|人妻另类视频亚洲午夜福利院|天堂一区二区三区玖玖|亚洲青草视频超碰97在线观|午夜黄色免费电影|欧美精品另类在线一区|97色色网在线亚洲AV专区一|亚洲自拍偷拍欧美

在外貿(mào)網(wǎng)站建設(shè)中，我們會(huì)遇到有客戶說需要用戶前端留言的時(shí)候可以上傳自定義的文件或者圖片等資料。

那么這篇文章一定可以幫到您。

我們基于bootstarp框架以及l(fā)ayui框架在pb中來實(shí)現(xiàn)這樣的效果。

效果類似如下圖。

需要上傳身份證正反兩面，以及多文件上傳。

第一：前端HTML代碼，請(qǐng)注意幾個(gè)數(shù)字的位置，比如說：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">&#xe67c;</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">&#xe67c;</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">&#xe67c;</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í)行單圖片實(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，或者自己寫個(gè)進(jìn)度條顯示

    // 簡單示例：控制臺(tái)輸出進(jìn)度
    console.log('上傳進(jìn)度：' + n + '%');

    // 或者顯示在頁面某個(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('上傳失敗：' + res.data);
    }
  },
  error: function(){
    layer.closeAll('loading');
    layer.msg('上傳發(fā)生錯(cuò)誤!');
  }
});



});

需要注意的問題是，這里上傳后的多文件，是多個(gè)文件的絕對(duì)地址以逗號(hào)的方式串連起來的。

所以我們?cè)诤笈_(tái)需要將這個(gè)字段解析出來。

由于后臺(tái)在添加多文件這個(gè)字段的時(shí)候，我們選擇的是附件。

所以在后臺(tái)Message的文件標(biāo)識(shí)中是：

{if($value2->type==4)}

找到他的詳情位置并修改：

我們通過JS的方法來拆分上面留言時(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}