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前端实现多图上传的全部知识点,感谢大家对服务器之家的支持。

延伸 · 阅读

精彩推荐