评论

收藏

[PHP] php layui实现前端多图上传实例

开发技术 开发技术 发布于:2021-08-20 12:46 | 阅读数:543 | 评论:0

php结合layui前端实现多图上传
前端html代码
<div class="layui-upload">
 
  <button type="button" class="layui-btn layui-btn-normal" id="testList">请选择图片</button>
 
  <span class="num_pic"></span>
 
  <div class="layui-upload-list">
 
  <table class="layui-table">
 
    <thead>
 
    <tr>
 
      <th>文件名</th>
 
      <th id="pic">图片预览</th>
 
      <th>大小</th>
 
      <th>状态</th>
 
      <th id="cao">操作</th>
 
    </tr>
 
    </thead>
 
    <tbody id="demoList"></tbody>
 
  </table>
 
  </div>
 
  <button type="button" class="layui-btn" id="testListAction">开始上传</button>
 
  <span class="num_pic"></span>
 
</div>
js 代码
<script type="text/javascript">
 
  layui.use('upload', function() {
 
  var $ = layui.jquery,
 
    upload = layui.upload;
 
  //多文件列表示例
 
  var demoListView = $('#demoList'),
 
    uploadListIns = upload.render({
 
    elem: '#testList',
 
    url: "{url('pic/index/upload')}",
 
    accept: 'images',
 
    acceptMime: 'image/*',
 
    size: 8192,
 
    multiple: true,
 
    number: 400,
 
    auto: false,
 
    exts: 'jpg|png|jpeg',
 
    bindAction: '#testListAction',
 
    choose: function(obj) {
 
      var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
 
      //读取本地文件
 
      obj.preview(function(index, file, result) {
 
      var tr = $(['<tr id="upload-' + index + '">', '<td>' + file.name + '</td>', '<td><img src="' + result + '" id="codetool">

后端代码


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));
 
  }
 
   /* $root_url.=date('Ymd').'/';*/
 
  $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));
 
  }
 
  }
上传效果:
DSC0000.png

DSC0001.png

以上就是php结合layui前端实现多图上传的全部知识点,感谢大家对CodeAE代码之家的支持。

关注下面的标签,发现更多相似文章