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

2025-05-27 0 20

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

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

快网idc优惠网 建站教程 php layui实现前端多图上传实例 https://www.kuaiidc.com/71362.html

相关文章

发表评论
暂无评论