服务器之家

服务器之家 > 正文

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

时间：2021-08-11 16:53     来源/作者：藏色散人

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 多图上传 

相关文章

热门资讯

yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021德云社封箱演出完整版 2021年德云社封箱演出在线看
2021德云社封箱演出完整版 2021年德云社封箱演出在线看 2021-03-15
返回顶部