php layui实现前端多图上传实例

时间：2021-09-01 16:41:49

php结合layui前端实现多图上传

前端html代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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 代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<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">

后端代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
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));
 
    }
 
  }

上传效果：

php layui实现前端多图上传实例

php layui实现前端多图上传实例

以上就是php结合layui前端实现多图上传的全部知识点，感谢大家对服务器之家的支持。

  • PHP
  • Layui
  • 多图上传

    • 延伸 · 阅读

    精彩推荐
    最近更新
    编辑推荐
    阅读排行
    热门标签
    2021 　 2038 　 100010 　 在线时间 　 bcompiler 　 PHP文件 　 形参 　 实参 　 存储方案 　 PHP技术 　 php安全 　 编程效率 　 Foxmail 　 PHPnow 　 apache_pn 　 visitFile 　 dede模板标签 　 ExcelFileParser 　 escape 　 IP查询 　 GOOGLE地图 　 递归循环 　 laradock 　 颠倒 　 变量引用 　 自动获取 　 递归删除 　 加载文件 　 异常机制 　 递增运算 　
    © 2019-2021 服务器之家(www.zzvips.com) 版权所有关于我们联系我们版权申明网站地图
    标签：

    相关文章