Thinkphp5.1+bootstrap插件多图片上传图解教程

作者: 挤时间学习的阿龙 | 来源:发表于2019-10-16 23:11 被阅读0次

Thinkphp5.1+bootstrap插件多图片上传图解教程
Thinkphp5.1+bootstrap插件多图片上传图解教程
form表单提交上传图片
ionic2实现图片下载
flask部署jenkins
网站地址
回看设置页面
layui 上传图片移动端调用相机
Typora 图片上传插件
input=file 上传图片,PPT,视频

很早之前就想学习TP5的多图上传插件，1年半都想学，百度了很久都看的云里雾里，今天终于会用在项目里了，代码也是网上找的。

这里要重点说明下，Thinkphp5提供的语法和快捷方法太多，查询数据的方式好几种，我这里数据库查询是在model里做了封装，例如 GoodsFilesModel。所以很多新手就会挂在这个地方，多去查下TP5的数据操作手册，和理解你自己看的课程的数据库封装模式，从而选择适合的自己的数据库操作语句。
毕竟没有一套实战课程把所有的日常功能都做完，然后把别的视频有的功能放到另个项目里就各种不对，原因就是TP5提供的方法很多，只能是多看多做几个项目，慢慢就理解了。

1、TP5下载图片上传类库，TP5默认extend扩展文件夹是没有upload的，
（1）扩展库下载地址
https://github.com/top-think/thinkphp-extend
（2）把解压出来的com和org文件夹放到网站根目录下thinkphp/extend目录下
TP5.1

image.png
（3）TP5后台控制器需要引入

image.png

2、前后台
（1）引入2个样式文件和4个js文件,地址改成自己的外网的可以不用改，为了速度建议下载到本地

如果你的前端框架是基于bootstrap的可以不用引入

样式文件引入

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
<link href="/static/admin/fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />

js文件引入

<script type="text/javascript" src="/static/admin/lib/jquery/1.9.1/jquery.min.js"></script>
<script src="/static/admin/fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="/static/admin/fileinput/js/fileinput_locale_zh.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>

（2）模版表单

<body>
<div class="page-container">
    <form action="{:url('office/product_add_goods')}" method="post" class="form form-horizontal" id="form-article-add">

        <div class="form-group">
            <label class="col-sm-2 control-label">上传图片：</label>
            <div id="formimageshow" class="formControls col-xs-2 col-sm-2">
                <button id="buttonShow" type="button" class="btn btn-success" onclick="upliadfileshow();return false;">上传轮播图片</button>
                <br />
                <br />
                <label for="checkbox-1">最多支持4张轮播图</label>
            </div>
        </div>

        <div class="form-group">
            <!-- 图片上传 -->
            <div id="modal-webuploader" class="modal fade in" tabindex="-1" role="dialog" aria-hidden="false" style="display: none;">
               <div class="modal-dialog" style="width:660px;">
                  <div class="modal-content">
                      <div class="modal-header">
                          <button type="button" id="close" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <ul class="nav nav-pills" role="tablist">
                               <li id="li_upload" class="active" role="presentation"><a href="#upload" aria-controls="upload" role="tab" data-toggle="tab" onclick="$('#select').hide();">上传图片</a></li>
                            </ul>
                          <div class="modal-body tab-content">
                              <div role="tabpanel" class="tab-pane network" id="network">
                              </div>
                              <div role="tabpanel" class="tab-pane upload active" id="upload">
                                 <div id="uploader" class="uploader">
                                    <input id="file-0" class="file" type="file" multiple="" data-min-file-count="1" />
                                    <br/>
                                 </div>
                              </div>
                          </div>
                      </div>
                  </div>
               </div>
            </div>
         </div>
    </form>
    <!-- 图片上传 -->
</div>
</body>

（3）前端图片上传、预览、删除相关js

<script type="text/javascript">
   // 图片上传
   function upliadfileshow(){
      $("#modal-webuploader").fadeIn();
      $("#modal-webuploader").fadeIn('slow');
      }

      $("#close").click(function(){
      $("#modal-webuploader").fadeIn();
      $("#modal-webuploader").fadeOut('slow');
      })

      function deleteImage(id){
         $.ajax({
            url:'{:url("office/product_del_images")}',
            type:'get',
            data:{id:id},
            dataType:'json',
            success:function(data){
               if(data==1){
                  $('#imageDelete'+id).remove();
                  var imagepath=$('input[class=imagepath]');
                  if(imagepath.length<4){
                     $('#buttonShow').removeAttr("disabled");
                     }else{

                          }
                     }else{
                           alert('删除失败');
                          }
                  }

               })
      }

   //图片上传
   initFileInput("file-0", "{:url('product_add_images')}");

   //初始化fileinput控件（第一次初始化）
   function initFileInput(ctrlName, uploadUrl) {
      var control = $('#' + ctrlName);
          control.fileinput({
             language: 'zh', //设置语言
             uploadUrl: uploadUrl, //上传的地址
             allowedFileExtensions : ['jpg', 'png','gif','jpeg'],//接收的文件后缀
             showUpload: true, //是否显示上传按钮
             showCaption: true,//是否显示标题
             showPreview:true,//是否显示文件的预览图。默认值true。
             showRemove:true,//是否显示删除/清空按钮。默认值true。
             browseClass: "btn btn-primary", //按钮样式
             previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
             maxFileCount: 4,//表示允许同时上传的最大文件个数
             dropZoneEnabled:true,//是否显示拖拽区域
             initialPreviewConfig:  {
                  caption: ctrlName,
                  width: '120px',
                  url: uploadUrl,
                  key: 101,
                  success: function() {
                  }
              }
          });
      }

$("#file-0").on("fileuploaded", function (event, data, previewId, index) {
    var div=$('<div class="input-group " id="imageDelete'+data.response['id']+'" style="margin-top:.5em;margin-right:2em; float:left;"><input type="hidden" name="imagepath[]" class="imagepath" value="'+data.response['id']+'"/><img src="'+data.response['imagepath']+'"; class="img-responsive img-thumbnail" width="150"><a class="close" style="position:absolute; top: 0px; right: -14px;" title="删除这张图片" onclick="deleteImage('+data.response['id']+')">×</a></div>');
    $('#formimageshow').after(div);
    var imagepath=$('input[class=imagepath]');
        if(imagepath.length>=4){
        $('#buttonShow').attr("disabled","disabled");//禁用上传按钮
            $("#modal-webuploader").fadeIn();//关闭上传
            $("#modal-webuploader").fadeOut('slow');
            }else{
        }
    });
</script>

（4）TP5.18后台图片上传方法和图片删除方法
保存图片路径到数据库，有个返回存入的id值， TP5.0可以使用add() 但是TP5.1 要使用insertGetId() ，用save()是保存并获取条数。

    //商品图片上传
    public function product_add_images(){
        $upload = new  \org\Upload();// 实例化上传类
        $upload->maxSize   =     3145728 ;// 设置附件上传大小
        $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
        $upload->rootPath  =      './static/files/'; // 设置附件上传目录    // 上传文件
        $upload->saveName=time().rand(1111,9999);
        $date=date("Y-m-d",time());//已上传日期为子目录名
        $upload->saveExt="png";//上传的文件后缀
        $info   =   $upload->upload();
        if(!$info) {// 上传错误提示错误信息
            $this->error($upload->getError());
        }else{// 上传成功
            $m = new GoodsFilesModel();
            $data['filepath']='/static/files/'.$date."/".$upload->saveName.".".$upload->saveExt;
            $result=$m->insertGetId($data);  
            $file=['id'=>$result,'imagepath'=>$data['filepath']];
            echo json_encode($file);
        }
    }


    //商品图片删除
    public function product_del_images(){
        $m = new GoodsFilesModel();
        $result=$m->destroy($_GET['id']);
        if($result){
            echo 1;
        }else{
            echo 0;
        }
    }

2、效果展示
选择图片

image.png

删除并更换1张图片

image.png
上传中

image.png
上传成功

image.png

删除2张试下

image.png

3、数据库
已成功插入数据,插入数据库时记得使用通过insertGetId() 方法返回id，后面要用到

image.png

4、还需要把这个商品的返会的ID——>储存在该商品数据表的一个字段中——>修改编辑及前台遍历显示图片。
（方法更新中）
下图是商品表，imagepath字段保留该商品所有图片id，后续前台轮播图和商品修改时就可以使用了。

image.png

5、项目前台完整代码

反复测试，已经把没有用的代码全部删除掉了。

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/admin/fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
</head>

<body>
 <!-- 图片上传 -->
<div class="page-container">
    <form action="{:url('office/product_add_goods')}" method="post" class="form form-horizontal" id="form-article-add">
        <div class="form-group">
            <label class="col-sm-2 control-label">上传图片：</label>
            <div id="formimageshow" class="formControls col-xs-2 col-sm-2">
                <button id="buttonShow" type="button" class="btn btn-success" onclick="upliadfileshow();return false;">上传轮播图片</button>
                <br />
                <br />
                <label for="checkbox-1">最多支持4张轮播图</label>
            </div>
        </div>

        <div class="form-group">
            <div id="modal-webuploader" class="modal fade in" tabindex="-1" role="dialog" aria-hidden="false" style="display: none;">
               <div class="modal-dialog" style="width:660px;">
                  <div class="modal-content">
                      <div class="modal-header">
                          <button type="button" id="close" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <ul class="nav nav-pills" role="tablist">
                               <li id="li_upload" class="active" role="presentation"><a href="#upload" aria-controls="upload" role="tab" data-toggle="tab" onclick="$('#select').hide();">上传图片</a></li>
                            </ul>
                          <div class="modal-body tab-content">
                              <div role="tabpanel" class="tab-pane network" id="network">
                              </div>
                              <div role="tabpanel" class="tab-pane upload active" id="upload">
                                 <div id="uploader" class="uploader">
                                    <input id="file-0" class="file" type="file" multiple="" data-min-file-count="1" />
                                    <br/>
                                 </div>
                              </div>
                          </div>
                      </div>
                  </div>
               </div>
            </div>
         </div>
    </form>
    <!-- 图片上传 -->
</div>
</body>

<script type="text/javascript" src="/static/admin/lib/jquery/1.9.1/jquery.min.js"></script>
<script src="/static/admin/fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="/static/admin/fileinput/js/fileinput_locale_zh.js" type="text/javascript"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
   // 图片上传
   function upliadfileshow(){
      $("#modal-webuploader").fadeIn();
      $("#modal-webuploader").fadeIn('slow');
      }

      $("#close").click(function(){
      $("#modal-webuploader").fadeIn();
      $("#modal-webuploader").fadeOut('slow');
      })

      function deleteImage(id){
         $.ajax({
            url:'{:url("office/product_del_images")}',
            type:'get',
            data:{id:id},
            dataType:'json',
            success:function(data){
               if(data==1){
                  $('#imageDelete'+id).remove();
                  var imagepath=$('input[class=imagepath]');
                  if(imagepath.length<4){
                     $('#buttonShow').removeAttr("disabled");
                     }else{

                          }
                     }else{
                           alert('删除失败');
                          }
                  }
               })
      }

   //图片上传
   initFileInput("file-0", "{:url('product_add_images')}");

   //初始化fileinput控件（第一次初始化）
   function initFileInput(ctrlName, uploadUrl) {
      var control = $('#' + ctrlName);
          control.fileinput({
             language: 'zh', //设置语言
             uploadUrl: uploadUrl, //上传的地址
             allowedFileExtensions : ['jpg', 'png','gif','jpeg'],//接收的文件后缀
             showUpload: true, //是否显示上传按钮
             showCaption: true,//是否显示标题
             showPreview:true,//是否显示文件的预览图。默认值true。
             showRemove:true,//是否显示删除/清空按钮。默认值true。
             browseClass: "btn btn-primary", //按钮样式
             previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
             maxFileCount: 4,//表示允许同时上传的最大文件个数
             dropZoneEnabled:true,//是否显示拖拽区域
             initialPreviewConfig:  {
                  caption: ctrlName,
                  width: '120px',
                  url: uploadUrl,
                  key: 101,
                  success: function() {
                  }
              }
          });
      }

$("#file-0").on("fileuploaded", function (event, data, previewId, index) {
    var div=$('<div class="input-group " id="imageDelete'+data.response['id']+'" style="margin-top:.5em;margin-right:2em; float:left;"><input type="hidden" name="imagepath[]" class="imagepath" value="'+data.response['id']+'"/><img src="'+data.response['imagepath']+'"; class="img-responsive img-thumbnail" width="150"><a class="close" style="position:absolute; top: 0px; right: -14px;" title="删除这张图片" onclick="deleteImage('+data.response['id']+')">×</a></div>');
    $('#formimageshow').after(div);
    var imagepath=$('input[class=imagepath]');
        if(imagepath.length>=4){
        $('#buttonShow').attr("disabled","disabled");//禁用上传按钮
            $("#modal-webuploader").fadeIn();//关闭上传
            $("#modal-webuploader").fadeOut('slow');
            }else{
        }
    });
</script>
</html>

Thinkphp5.1+bootstrap插件多图片上传图解教程
前言：目前常用的后台框架比较多，Layui H+ admin Xadmin 等等，有基于bootstarp的、jQ...
Thinkphp5.1+bootstrap插件多图片上传图解教程
很早之前就想学习TP5的多图上传插件，1年半都想学，百度了很久都看的云里雾里，今天终于会用在项目里了，代码也是网上...
form表单提交上传图片
上传图片我首先想到的是利用这个插件，webupload LUploade这类插件大多支持图片预览，断点/分片上传，...
ionic2实现图片下载
cordova-plugin-file-transfer 这个插件，前面的一篇中介绍了多图片上传，也用到了这个插件...
flask部署jenkins
安装jenkins python插件安装pipline插件新建 [图片上传中...(image.png-132...
网站地址
文件上传插件（图片、附件、显示上传进度）： http://fex.baidu.com/webuploader/新版...
回看设置页面
页面加载时检测版本，检测头像选择图片添加上传图片 1选择图片的插件还不会写 2上传图片要调用HTTPservi...
layui 上传图片移动端调用相机
layui上传图片插件默认只能上传资源管理器的图片，不会启动相机。解决方法： ojbk
Typora 图片上传插件
[TOC] 介绍 Typora QCloud Cos 是一个基于 Python 开发的 Typora 图片上传插件...
input=file 上传图片,PPT,视频
多文件上传单文件上传上传图片限制上传格式