中文字幕乱伦无码|久久丝袜综合视频|国产原创在线播放|www.欧美高清|伊人影院在线看|五月开心综合婷婷|久久人妻无码中文字幕|黄色视频新aaa|亚洲另类性视频|91视频久久综合

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

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

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

效果類似如下圖。

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

第一：前端HTML代碼，請注意幾個數(shù)字的位置，比如說：upload1, ico1,ico_box1, 然后是upload5,ico5,ico_box5,這是兩個單圖上傳的，然后是相關(guān)證據(jù)的ico3，upload3,后臺添加字段：

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>

第二步：我們來看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個文件！');
          return false;
        }
      });
    },

    progress: function(n, elem, e) {
      console.log('上傳進度：' + n + '%');
      $('#upload-progress').text('上傳進度：' + 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ù)你當前的地址調(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('已達到最多上傳數(shù)量（10個）！');
      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ā)生錯誤!');
    }
  });

});
</script>

需要注意的問題是，這里上傳后的多文件，是多個文件的絕對地址以逗號的方式串連起來的。

所以我們在后臺需要將這個字段解析出來。

由于后臺在添加多文件這個字段的時候，我們選擇的是附件。

所以在后臺Message的文件標識中是：

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

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

我們通過JS的方法來拆分上面留言時串聯(lián)的數(shù)據(jù)段。

拆分后可以得到獨立的A標簽鏈接。方便后臺查詢相關(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ù)，否則無法上傳：

  
    // 上傳接口
    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'=>"錯誤");
            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));
        }
    }

以下代碼是改進方案，比如說上傳了文件之后，發(fā)現(xiàn)錯誤的，要重新上傳，需要刪除原來的文件。

<!-- 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>

    <!-- 上傳進度提示 -->
    <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', // 限制上傳類型

    // 選擇文件前檢查當前數(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個文件！');
          return false;
        }
      });
    },

    // 上傳進度回調(diào)
    progress: function(n, elem, e) {
      $('#upload-progress').text('上傳進度：' + 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ù)量
        var oldVal = $('#ico3').val();
        var files = oldVal ? oldVal.split(',') : [];
        if (files.length >= 10) {
          layer.msg('已達到最多上傳數(shù)量（10個）！');
          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ā)生錯誤!');
    }
  });

  // 刪除按鈕點擊事件
  $(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(','));

    // 移除對應顯示項
    $('#' + fileId).remove();
  });

});
</script>

再大膽一點，我們使用LAYUI拖動文件上傳的功能。

<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>

    <!-- 上傳進度顯示 -->
    <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>