thinkphp5 结合plupload 实现多图片的上传

最新推荐文章于 2023-06-02 15:35:02 发布
最新推荐文章于 2023-06-02 15:35:02 发布
阅读量541 收藏 1
点赞数
分类专栏： thinkphp5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38615720/article/details/83001201
版权 
PHP页面
<?php
namespace app\index\controller;
use think\Controller;
use think\Db;
class Upload extends Controller{
        /*
          thinkphp5 整合多图片上传
        */
        //列表页  
        public function index(){
           $list=Db::name('multimage')->order('id desc')->select();
           $this->assign('list',$list);
            return $this->fetch();
        }
        //添加
        public function add(){
           return $this->fetch();
        }
        //多张图片上传添加处理
        public function addsave(){
            $data=array(
                'multimage'=>input("post.multimage"),
                'addtime'=>time(),
            );
            $re=Db::name('multimage')->insert($data);
            if($re){
                $this->success('添加成功','Upload/index');
            }else{
                $this->error('添加失败');
            }
        }
        //修改
        public function edit(){
            $id = input("param.id");
            $row=Db::name('multimage')->where(array("id"=>$id))->find();
            $row['multimageArray']=array_filter(explode('###', $row['multimage']));
            $this->assign('row',$row);
           return $this->fetch();
        }
        //多张图片上传修改处理
        public function editsave(){
            $data=array(
                'multimage'=>input("post.multimage"),
            );
            $ini = array(
                'id' => input("post.id"),
            );
            $re=Db::name('multimage')->where($ini)->update($data);
            if($re){
                $this->success('修改成功','Upload/index');
            }else{
                $this->error('修改失败');
            }
        }
        //删除
        public function delete(){
            $id = input("param.id");
            if(Db::name('multimage')->where("id",$id)->delete()){
                $this->success('删除成功','Upload/index');
            }else{
                $this->error('删除失败');
            }
        }
        //上传的操作
        public function upload(){
            $typeArr = array("jpg", "png", "gif","jpeg");//允许上传文件格式
            define('ROOT',getcwd());
            $path = "./uploads/multimage/";//上传路径必须是绝对路径
            if (isset($_POST)) {
                $name = $_FILES['file']['name'];
                $size = $_FILES['file']['size'];
                $name_tmp = $_FILES['file']['tmp_name'];
                if (empty($name)) {
                    echo json_encode(array("error"=>"您还未选择图片"));
                    exit;
                }
                $type = strtolower(substr(strrchr($name, '.'), 1)); //获取文件类型


                if (!in_array($type, $typeArr)) {
                    echo json_encode(array("error"=>"清上传jpg,png或gif类型的图片！"));
                    exit;
                }
                if ($size > (500 * 1024)) {
                    echo json_encode(array("error"=>"图片大小已超过500KB！"));
                    exit;
                }
                $pic_name = time() . rand(10000, 99999) . "." . $type;//图片名称
                $pic_url = $path . $pic_name;//上传后图片路径+名称
                //echo json_encode(array('error'=>$pic_url));exit();
                if (move_uploaded_file($name_tmp, $pic_url)) { //临时文件转移到目标文件夹
                    $array = array(
                        'error'=>0,
                        'pic'=>str_replace("\\","/",'/uploads'.DS.'multimage'.DS.$pic_name),  //图片的路径替换
                        'name'=>$pic_name
                    );
                    echo json_encode($array);
                } else {
                    echo json_encode(array("error"=>"上传有误，清检查服务器配置！"));
                }
            }else{
                echo json_encode(array("error"=>"上传有误，清检查服务器配置！"));
            }
        }
}

add.html页面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>thinkphp5整合多张图片上传添加</title>
<!-- css样式开始 -->
<style type="text/css">
body{font-family:'微软雅黑';}
.btn{
-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px;border-radius:3px;background-color: #ff8400;color: #fff;display: inline-block;height: 28px;line-height: 28px;text-align: center;width: 72px;transition: background-color 0.2s linear 0s;border:none;cursor:pointer;margin:0 0 20px;}
.demo{width:900px;margin:10px auto;}
.btn:hover{background-color: #e95a00;text-decoration: none;color:#fff;}
.ul_pics{margin-top:10px;margin-left:-35px;}
.ul_pics li{float:left;width:160px;height:160px;border:1px solid #ddd;padding:2px;text-align: center;margin:0 5px 5px 0;list-style:none;}
.ul_pics li .img{width: 150px;height: 140px;display: table-cell;vertical-align: middle;position:relative;}
.ul_pics li img{max-width: 150px;max-height: 140px;vertical-align: middle;}
.progress{position:relative;padding: 1px; border-radius:3px; margin:60px 0 0 0;} 
.bar {background-color: green; display:block; width:0%; height:20px; border-radius:3px; } 
.percent{position:absolute; height:20px; display:inline-block;top:3px; left:2%; color:#fff } 
.span_del{display:block;height:16px;width:16px;position:absolute;top:5px;right:5px;cursor:pointer;background:url(__plupload__/Image/close.png);display:none;}
input,button,submit,textarea,option,textarea{font-family:'微软雅黑';}
.baocun{cursor:pointer;}
.clear{clear:both;}
<!-- css样式结束 -->
</style>
</head>
<body>
<a href="{:url('upload/index')}">返回首页</a>
<form action="{:url('upload/addsave')}" method="post">
   <div class="demo">
       <a class="btn" id="btn">上传图片</a> 最大500KB，支持jpg，gif，png格式。  
       <ul id="ul_pics" class="ul_pics clearfix"></ul>
          <input type='hidden' name="multimage" id="multimage" />
          <div class="clear"></div>
      <div><input type="submit" value="提交" /></div>
   </div>
</form>

<script type="text/javascript" src="__plupload__/Js/jquery.js"></script>
<script type="text/javascript" src="__plupload__/Library/plupload/plupload.full.min.js"></script>
<script type="text/javascript">
      var uploader = new plupload.Uploader({
          runtimes: 'html5,flash,silverlight,html4', 
          browse_button: 'btn', 
          url: "{:url('Upload/upload')}",
          flash_swf_url: '__plupload__/Library/plupload/Moxie.swf',
          silverlight_xap_url: '__plupload__/Library/plupload/Moxie.xap',
          filters: {
              max_file_size: '500kb', 
              mime_types: [
                  {title: "files", extensions: "jpg,png,gif"}
              ]
          },
          multi_selection: true, 
          init: {
              FilesAdded: function(up, files) { 
                  if ($("#ul_pics").children("li").length > 30) {
                      alert("您上传的图片太多了！");
                      uploader.destroy();
                  } else {
                      var li = '';
                      plupload.each(files, function(file) {
                          li += "<li class='li_image' id='" + file['id'] + "'>" +
                       "<div class='progress'><span class='bar'></span><span   class='percent'>0%</span></div></li>";
                      });
                      $("#ul_pics").append(li);
                      uploader.start();
                  }
              },
              UploadProgress: function(up, file) { 
                  var percent = file.percent;
                  $("#" + file.id).find('.bar').css({"width": percent + "%"});
                  $("#" + file.id).find(".percent").text(percent + "%");
              },
              FileUploaded: function(up, file, info) {
                  var data = eval("(" + info.response + ")");
                  console.log(data.pic);
       $("#" + file.id).html("<div class='img'><img src='" + data.pic + "'/><span class='span_del'></span></div>");
                  var old=$("#multimage").val();
                  $("#multimage").val(old + data.pic+'###');
              },
              Error: function(up, err) { 
                  alert(err.message);
              }
          }
      });
      uploader.init();
</script>
<script type="text/javascript">
$(function(){
   $(".demo").on("mouseover",'.li_image',function(){
      $(this).find(".span_del").show();
   })
   $(".demo").on("mouseout",'.li_image',function(){
      $(this).find(".span_del").hide();
   })
   $("#ul_pics").on("click",'.span_del',function(){
      var src=$(this).siblings('img').attr('src');
      var multimage=$("#multimage").val();
      var new_multimage=multimage.replace(src+'###', '');
      $("#multimage").val(new_multimage);
      $(this).parents('li.li_image').remove();
   })
})
</script>
</body>
</html>

数据库:

/*
Navicat MySQL Data Transfer

Source Server         : 127.0.0.1
Source Server Version : 50553
Source Host           : localhost:3306
Source Database       : miyun

Target Server Type    : MYSQL
Target Server Version : 50553
File Encoding         : 65001

Date: 2018-10-10 17:51:26
*/

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for `gok_multimage`
-- ----------------------------
DROP TABLE IF EXISTS `gok_multimage`;
CREATE TABLE `gok_multimage` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '主键id',
  `multimage` text COMMENT '多张图片',
  `addtime` varchar(255) DEFAULT NULL COMMENT '添加时间',
  PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=12 DEFAULT CHARSET=utf8 COMMENT='多张图片上传表';

-- ----------------------------
-- Records of gok_multimage
-- ----------------------------
INSERT INTO `gok_multimage` VALUES ('7', '/demo/Data/Uploads/multimage/148731139531533.jpg###/demo/Data/Uploads/multimage/148731139596025.jpg###', '1487311399');
INSERT INTO `gok_multimage` VALUES ('11', '/uploads/multimage/153916297679973.jpg###/uploads/multimage/153916297660213.jpg###/uploads/multimage/153916394396799.jpg###', '1539162977');
INSERT INTO `gok_multimage` VALUES ('10', '/uploads\\multimage\\153916259859133.jpg###/uploads\\multimage\\153916259944527.jpg###', '1539162600');
 

PHP搬砖操作工
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
thinkphp5 多图片上传
10-10
thinkphp5结合plupload前段开发框架实现多图片的上传，修改，删除功能
thinkphp多图片上传
07-27
这里主要就是 $upload->saveRule = time;这个是改变图片名称的，可同时改变多张图片的名称，实现图片的不同名 这样也就不会出现覆盖的现象了 还有一点就是： $User->fenxiang_fm = 'Uploads/'.$info[0]["savename"]; // 这里的$info[0]["savename"]的下标[0]表示上传的第1个图片按顺序，记住是下标 $User->fenxiang_sc = 'Uploads/'.$info[1]["savename"]; // 这里的$info[1]["savename"]的下标[1]表示上传的第2个图片按顺序，记住是下标
PHP_thinkphp5选择上传多张图片
小歪博客
04-02 545
.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title
tp5多图上传php,thinkphp5 结合plupload实现图片批量上传
weixin_42503881的博客
03-24 335
搜索热词在extend目录下新增目录uploader，并新建类Uploadsnamespace uploader;class Uploads {public static function upfile($file,$path = 'images',$add_domain = false) {$res = ['errno' => 1,'errmsg' => '上传图片错误'];$dat...
thinkphp5,单图,多图,上传
weixin_30268071的博客
01-05 147
/** * 上传单图 */ function upload($path, $filename) { $file = request()-&gt;file($filename); $info = $file-&gt;rule('uniqid')-&gt;validate(['size' =&gt; 200 * 1024 * 1024, 'ex...
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
10-17
主要介绍了Thinkphp5+plupload实现的图片上传功能,结合具体实例形式分析了thinkPHP5结合plupload实现可支持实时预览的图片上传功能相关操作技巧,需要的朋友可以参考下
thinkphp5 框架结合plupload实现图片批量上传功能示例
10-15
主要介绍了thinkphp5 框架结合plupload实现图片批量上传功能,结合实例形式分析了thinkphp5 框架结合plupload实现图片批量上传功能相关扩展类定义、使用及前端js等操作技巧,需要的朋友可以参考下
thinkPHP5框架整合plupload实现图片批量上传功能的方法
10-19
主要介绍了thinkPHP5框架整合plupload实现图片批量上传功能的方法,结合实例形式分析了thinkPHP结合pluploadQueue实现上传功能的相关操作技巧,需要的朋友可以参考下
thinkPHP5.0上传
qq_19716091的博客
06-02 474
【代码】thinkPHP5.0上传。
plupload 多文件上传组件
11-26
plupload php plupload 多文件上传组件
ThinkPHP5——实现单（多）文件上传
五柳
01-07 1931
单文件上传 1）页面代码 &lt;form action="{:url('upload')}" method="post" enctype="multipart/form-data"&gt; &lt;p&gt; File： &lt;input type="File" name="file" value=""&
php多图上传方发封装代码,thinkphp3.2 多图上传方法
weixin_35710005的博客
04-06 135
最终展示效果如下 这里是源代码下载地址https://pan.baidu.com/s/1eSAQoSy然后是具体的详细步骤(图片为网上参考，代码是实际写出效果的代码；方便引用)：1.在需要添加图片的html页面上引入js，再编写上传图片的代码块这一步和他原来的代码无异，只是无需写隐藏的输入框了，因为每张图片都需要一个hidden input 记录id值，所以在第二步中写到了如何动态添加input...
thinkphp5 整合plupload实现图片批量上传
征途人生&梦
04-21 4139
在官网下载plupload 我使用的是pluploadQueue 在HTML页面引入相应的css和js，然后根据示例代码修改为自己的代码 {:lang('photo')}                        {:lang('plupupload_tip')}                    
TP5之上传多张图片
weixin_30545285的博客
03-22 406
1、效果图（每点击一次‘添加选项’，就会有一个新的 file 框来添加新的图片） 2、view 1 <!--不要忘了引入jquery文件--> 2 <!-- post传值方式和文件传输协议一定要加上 --> 3 <input type="file" name="image[]"> 4 <input type="button" id...
php表单带多图上传,thinkphp框架表单数组实现图片批量上传功能示例
weixin_33497800的博客
03-19 213
本文实例讲述了thinkphp框架表单数组实现图片批量上传功能。分享给大家供大家参考，具体如下：今天做一个表单数组实现图片批量上传，js不是很会，在网上找了资料改的，html页面如下：var i = 1;function addElement(){var tr = document.createElement('tr');var td1=document.createElement("td");v...
think php上传图片,thinkphp5使用Webupload上传图片
weixin_33836042的博客
03-10 417
因为Blog的升级使用的是ThinkPHP5的版本，然后有些变动这里自己遇到了，然后整理下。首先是上传实例化：手册上上传使用方法HTMLPHPpublicfunctionuploads(){//获取表单上传文件例如上传了001.jpg$file=request()->file('image');//移动到框架应用根目录/public/uploadss/目录下$info=$...
php上传图片自动覆盖,thinkphp多图片上传（插入数据库，并且不出现覆盖现象）...
weixin_39528525的博客
03-11 214
经过测试，好像在thinkphp手册中saveRule默认值并不是uniqid，而是图片原名称，最好也不要用time，因为可能时间会相同，也就是会重名这里主要就是$upload->saveRule = uniqid;这个是改变图片名称的，可同时改变多张图片的名称，实现图片的不同名这样也就不会出现覆盖的现象了还有一点就是：$User->fenxiang_fm = 'Uploads/'....
thinkphp5 将base64图片转二进制 上传服务器
最新发布
06-26
在ThinkPHP5框架中，将Base64编码的图片转换为二进制数据并上传到服务器通常涉及以下几个步骤： 1. **解码Base64**: 首先，你需要从用户提交的数据中提取Base64编码的图片字符串。这通常是通过`$_POST`或`$_GET`...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值