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

<rt id="luyk9"><small id="luyk9"></small></rt>
      打造一個(gè)外貿(mào)網(wǎng)站，不僅需要有吸引人的設(shè)計(jì)，更需要考慮用戶的體驗(yàn)。我們的目標(biāo)是從文案、設(shè)計(jì)、技術(shù)等多個(gè)維度出發(fā)，構(gòu)建一個(gè)以用戶體驗(yàn)為中心、以詢盤為導(dǎo)向的營(yíng)銷型外貿(mào)網(wǎng)站。讓您的客戶在短時(shí)間內(nèi)了解您的優(yōu)勢(shì)，快速詢盤！
      全國(guó)分站
      外貿(mào)網(wǎng)站建設(shè) 外貿(mào)獨(dú)立站推廣 跨境電商

      憑祥市前端留言需要上傳多個(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)這樣的效果。

      效果類似如下圖。image.png

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


      第一：前端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">&#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>


      第二步：我們來(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í)候，我們選擇的是附件。

      前端留言需要上傳多個(gè)文件的時(shí)候，包括ZIP，PDF，DOC等不同格式文件

      所以在后臺(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">&#xe67c;</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('上傳失敗：' + 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">&#xe67c;</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:
      新聞推薦
      網(wǎng)站后臺(tái)增加自定義表單提醒功能。
      網(wǎng)站后臺(tái)增加自定義表單提醒功能。

      我們的網(wǎng)站后臺(tái)默認(rèn)有一個(gè)留言的提醒數(shù)據(jù)：但是如果要有多個(gè)留言表單，那么我們自定義的留言表單卻沒(méi)有這個(gè)...

      后臺(tái)發(fā)布文章新增預(yù)覽功能。
      后臺(tái)發(fā)布文章新增預(yù)覽功能。

      在之前的文章中，我們有講過(guò)，如何使用擴(kuò)展字段來(lái)此入HTML代碼并添加預(yù)覽功能。文章鏈接可查看：https://ww...

      網(wǎng)站防攻擊代碼及服務(wù)器NGINX配置。
      網(wǎng)站防攻擊代碼及服務(wù)器NGINX配置。

      以下內(nèi)容來(lái)源于PB交流QQ群。第一：NGINX配置。#攔截常見(jiàn)敏感后臺(tái)路徑訪問(wèn)（例如dede、admin、wp-login等），...

      前端留言需要上傳多個(gè)文件的時(shí)候，包括ZIP，PDF，DOC等不同格式文件
      前端留言需要上傳多個(gè)文件的時(shí)候，包括ZIP，PDF，DOC等不同格式文...

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

      開啟外貿(mào)時(shí)代,歡迎留言！
      留言您的聯(lián)系方式,我們會(huì)第一時(shí)間聯(lián)系您！

      本站TAG： 外貿(mào)建站公司 外貿(mào)獨(dú)立站建站 廈門外貿(mào)網(wǎng)站建設(shè) 廈門外貿(mào)網(wǎng)站建設(shè)公司 建設(shè)外貿(mào)網(wǎng)站 英文網(wǎng)站建設(shè) 外貿(mào)網(wǎng)站建設(shè) 深圳外貿(mào)網(wǎng)站建設(shè) 外貿(mào)網(wǎng)站制作 網(wǎng)站建設(shè) 外貿(mào) 獨(dú)立站 外貿(mào)網(wǎng)站設(shè)計(jì) 上海外貿(mào)網(wǎng)站建設(shè) 深圳網(wǎng)站建設(shè) 深圳網(wǎng)站制作 深圳網(wǎng)站制作公司 深圳外貿(mào)網(wǎng)站建設(shè)公司 怎么做外貿(mào)推廣 外貿(mào)網(wǎng)站建 深圳外貿(mào)網(wǎng)站制作 深圳外貿(mào)網(wǎng)站開發(fā) 憑祥市外貿(mào)網(wǎng)站建設(shè)公司 外貿(mào)網(wǎng)站建設(shè)公司 憑祥市外貿(mào)網(wǎng)站建設(shè)
      ? copyright 黑馬視覺(jué)品牌網(wǎng)站設(shè)計(jì) 粵ICP備16086975號(hào)
      Top