个人中心
gpt4 book ai didi

thinkphp5 框架结合plupload实现图片批量上传功能示例

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 30 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章thinkphp5 框架结合plupload实现图片批量上传功能示例由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

本文实例讲述了thinkphp5 框架结合plupload实现图片批量上传功能。分享给大家供大家参考，具体如下:

在extend目录下新增目录uploader，并新建类Uploads 。

?
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
<?php
namespace uploader;
 
class Uploads {
  public static function upfile( $file , $path = 'images' , $add_domain = false) {
   $res = [ 'errno' => 1, 'errmsg' => '上传图片错误' ];
   $data = '' ;
   if (! empty ( $file )) {
    // 上传根目录
    $file_path = 'uploads/' ;
    // 如果传了路径过来，则加入路径
    if (! empty ( $path )) {
     $file_path .= $path . '/' ;
    }
    if (! file_exists ( $file_path )) {
     @ mkdir ( $file_path );
    }
    // 上传
    $info = $file ->move( $file_path );
    // 获取后缀
    $ext = strtolower ( $info ->getExtension());
    //判断后缀是否合法
    $exts = [ 'jpg' , 'png' , 'gif' , 'jpeg' , 'mp4' , 'avi' , '3gp' ];
    if (in_array( $ext , $exts )) {
     $save_name = $info ->getSaveName();
     $save_path = "/" . $file_path . $save_name ;
     if ( $add_domain ) {
      $save_path = "http://www.localhost.com/" . $file_path . $save_name ;
     }
     $res = [ 'errno' => 0, 'data' => $save_path ];
    } else {
     $res = [ 'errno' => 1, 'errmsg' => $ext ];
    }
   } else {
    $res = [ 'errno' => 1, 'errmsg' => '请选择图片！' ];
   }
  
   return $res ;
  }
}
?>

使用 。

?
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
<?php
 
namespace app\backend\controller;
 
use think\Controller;
use think\Request;
use uploader\Uploads;
 
class Upload extends Controller
{
  public function upload(Request $request ) {
   $files = $request ->file( "file" );
   $updir = $request ->post( 'updir' );
   $res = Uploads::upfile( $files , $updir );
   return json_encode( $res );
  }
 
  public function del_upload(Request $request ) {
   $res = [ 'errno' => 1, 'errmsg' => '删除失败' ];
   $filename = $request ->post( 'filename' );
   if (! empty ( $filename )) {
    @unlink( $_SERVER [ 'DOCUMENT_ROOT' ] . $filename );
    $res = [ 'errno' => 0, 'errmsg' => $filename ];
   }
   return json_encode( $res );
  }
 
}
 
?>

前端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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
var image_files = new Array(); // 多图片上传临时保存
$(document).ready( function () {
  $( '.media-picker' ).each( function () {
   var el = $( this );
   var elbtn = el.find( '.media-picker-button' );
   var multi_selection = false ;
   var inputField = el.find( 'input[type=hidden]' );
   // 是否多文件上传
   if (elbtn.attr( 'data-multiple' ) == 'multiple' ) {
    multi_selection = true ;
   }
   // 上传目录
   var upload_path = inputField.attr( 'upload-path' );
   var uploader = new plupload.Uploader({
    runtimes : 'html5,flash,silverlight,html4' ,
    browse_button : elbtn.attr( 'data-id' ) + '_uploader' ,
    multi_selection: multi_selection,
    auto_start: true ,
    flash_swf_url : '../plugins/plupload/js/Moxie.swf' ,
    silverlight_xap_url : '../plugins/plupload/js/Moxie.xap' ,
    url : '/backend/upload' ,
   
    filters: {
     mime_types : [ //只允许上传图片和zip,rar文件
     { title : "Image files" , extensions : "jpg,jpeg,gif,png,bmp" },
     { title : "Video files" , extensions : "mp4,3gp" }
     ],
     max_file_size : '10mb' , //最大只能上传10mb的文件
     prevent_duplicates : false //不允许选取重复文件
    },
 
    init: {
     PostInit: function () {},
 
     BeforeUpload: function (up, file) {
      up.setOption( 'multipart_params' , { 'updir' : upload_path})
     },
 
     FilesAdded: function (up) {
      up.start(); //选择完后直接上传
     },
 
     FileUploaded: function (up, file, info) {
      if (info.status == 200)
      {
       var file_type = file.type;
       var is_image = file_type.indexOf( 'image' );
       var is_video = file_type.indexOf( 'video' );
       // 解析返回的数据
       var result = JSON.parse(info.response);
       var img_list = "" ;
       if (result.errno == 0) {
        // 返回的图片上传结果
        var file_name = result.data;
        if (multi_selection) {
         // 多图片上传不考虑视频
         if (is_image > -1) {
          // 存入临时数组
          image_files.push(file_name);
          inputField.val(JSON.stringify(image_files));
          for ( var i = 0; i < image_files.length; i++) {
           img_list += "<li><img src='" +image_files[i]+ "' /><span class='delete-image'>✖</span><p>" +image_files[i]+ "</p></li>" ;
          }
         }
        } else {
         inputField.val(file_name);
         if (is_image > -1) {
          img_list = "<li><img src='" +result.data+ "' /><span class='delete-image'>✖</span><p>" +result.data+ "</p></li>" ;
         }
         if (is_video > -1) {
          img_list = "<li><video controls src='" +result.data+ "'></video><span class='delete-image'>✖</span><p>" +result.data+ "<p></li>" ;
         }
        }
        el.find( '.image-list' ).html(img_list);
       } else {
        alert(result.errmsg);
       }
      }
      else
      {
       alter(info.response);
      }
     },
 
     Error: function (up, err) {
      alert(err.response);
     }
    }
   })
   uploader.init();
 
 
   // 删除
   if (multi_selection) {
    el.on( 'click' , '.delete-image' , function () {
     var file_name = inputField.val();
     var elDel = $( this );
     // 得到filename
     var current_file_name = elDel.next( 'p' ).html();
     // 删除当前的父级li
     elDel.parent().remove();
     // 重新赋值数组
     var new_image_files = new Array();
     if (image_files != '' ) {
      new_image_files = image_files;
     } else {
      new_image_files = $.parseJSON(file_name);
     }
     // 去掉数组中的当前值
     for ( var i in new_image_files) {
      if (new_image_files[i] == current_file_name) {
       new_image_files.splice(i,1);
       break ;
      }
     }
     $.ajax({
       type: "POST" ,
       url: "/backend/del_upload" ,
       data: "filename=" + current_file_name,
       success: function (msg) {
         console.log(msg)
       }
     });
     inputField.val(JSON.stringify(new_image_files));
    });
   } else {
    el.on( 'click' , '.delete-image' , function (){
     // 显示值为空
     var file_name = inputField.val();
     el.find( '.image-list' ).html( '' );
     inputField.val( '' );
     $.ajax({
      type: "POST" ,
      url: "/backend/del_upload" ,
      data: "filename=" + file_name,
      success: function (msg) {
        console.log(msg)
      }
     });
    });
   }
  })
})

希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助.

原文链接：https://blog.csdn.net/tang05709/article/details/85261152 。

最后此篇关于thinkphp5 框架结合plupload实现图片批量上传功能示例的文章就讲到这里了,如果你想了解更多关于thinkphp5 框架结合plupload实现图片批量上传功能示例的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

30 4 0
文章推荐： python 贪心算法的实现
文章推荐： CodeIgniter扩展核心类实例详解
文章推荐： CodeIgniter视图使用注意事项
文章推荐： 详解KMP算法以及python如何实现
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com