TP5 基于bootstrap实现多图上传插件

1----引入js文件和css文件

<!--图片上传-->
<link href="/public/static/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> <link href="/public/static/css/fileinput.css" rel="external nofollow" media="all" rel="stylesheet" type="text/css" /> <script src="/public/static/js/jquery-2.0.3.min.js"></script> <script src="/public/static/js/fileinput.js" type="text/javascript"></script> <script src="/public/static/js/fileinput_locale_de.js" type="text/javascript"></script> <script src="/public/static/js/bootstrap.min.js" type="text/javascript"></script>2-html代码
  <div class="form-group">
  <label for="inputEmail3" class="col-sm-2 control-label">多图上传</label>
  <div class="col-sm-10">
    <input id="file-0" type="file" multiple class="file" name="path[]" >
  </div>
</div>

3-控制器

public function add() {
//多图上传
$arryFile = $request->file("path");
foreach ($arryFile as $File){
    $pathImg="";
  //移动文件到框架应用更目录的public/uploads/
    $info = $File->move(ROOT_PATH . 'public' . DS . 'upload' . DS . 'top_bar' . DS . date('Y') . DS . date('m-d'),md5(microtime(true)));
    if ($info) {
      $pathImg = "/public/upload/top_bar/" . date('Y') . '/' . date('m-d') . '/' . $info->getFilename();
    } else {
      //错误提示用户
      return $this->error($File->getError());
    }
    $result["path"] = $pathImg;
    $result["top_bar_id"]=$dataId;
    Db::name('top_path')->insert($result);
  }

总结

以上所述是小编给大家介绍的TP5 基于bootstrap实现多图上传插件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • 基于vue+ bootstrap实现图片上传图片展示功能

    基于vue+ bootstrap实现图片上传图片展示功能

    效果图如下所示: html ..... ....... <-- key=idPicUrl --> <div class="col-sm-7" > <img :src="queryFirmInfo[key]" alt="" style="max-height:200px;max-width:250px" class="myimage" :name="key"

  • 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="external nofollow" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="__PUBLIC__/CSS/fileinput.css" rel="

  • BootStrap fileinput.js文件上传组件实例代码

    BootStrap fileinput.js文件上传组件实例代码

    1.首先我们下载好fileinput插件引入插件 <span style="font-size:14px;"><link type="text/css" rel="stylesheet" href="fileinput/css/fileinput.css" rel="external nofollow" /> <script type="text/javascript

  • spring MVC + bootstrap实现文件上传示例（带进度条）

    spring MVC + bootstrap实现文件上传示例（带进度条）

    最近学习了bootstrap,有结合了spring MVC写了个文件上传的示例,留做笔记,废话不多说,直接上代码 监听器类FileUploadProgressListener.Java package com.gpl.web.listener; import javax.servlet.http.HttpSession; import org.apache.commons.fileupload.ProgressListener; import org.springframework.stereo

  • Bootstrap fileinput文件上传预览插件使用详解

    Bootstrap fileinput文件上传预览插件使用详解

    介绍 通过本文,你可以学习到如何封装或者开发一个前端组件,同时学习Bootstrap-fileinput组件的使用,封装后使用更加简单方便. BaseFile是AdminEAP框架中基于Bootstrap-fileinput的附件上传组件,它支持 支持多文件.在线预览.拖拽上传等功能,封装后BaseFile主要包括以下功能: 弹出窗口的附件上传 当前界面的附件上传 显示附件明细 可编辑的附件明细(删除.预览.不可新增) 关于Bootstrap-fileinput的API文档可参考http://p

  • 基于bootstrap的文件上传控件bootstrap fileinput

    本文实例为大家分享了文件上传控件bootstrap fileinput的使用方法,供大家参考,具体内容如下 github地址:https://github.com/kartik-v/bootstrap-fileinput 官网:http://plugins.krajee.com/file-input 1.下载压缩文件. 2.导入文件 bootstrap-fileinput/css/fileinput.min.css bootstrap-fileinput/js/fileinput.min.js

  • TP5 基于bootstrap实现多图上传插件

    1----引入js文件和css文件 <!--图片上传--> <link href="/public/static/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> <link href="/public/static/css/fileinput.css" rel="external nofollow"

  • TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例

    本文实例讲述了TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法.分享给大家供大家参考,具体如下: 1-引入js文件和css文件 <!--图片上传--> <link href="/public/static/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet"> <link href="/public/sta

  • 基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解

    基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解

    Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadify 好看一些,功能也强大些,本文主要基于我自己的框架代码案例,介绍其中文件上传插件File Input的使用. 1.文件上传插件File Input介绍 这个插件主页地址是:http://plugins.krajee.com/file-input,可以从这里看到很多Demo的代码展示:http:/

  • 基于ThinkPHP5.0实现图片上传插件

    基于ThinkPHP5.0实现图片上传插件

    效果预览图: 该插件主要功能是:可预览裁剪图片和保存原图片,执行裁剪图片后会删除 裁剪的原图片目录,以便减少空间. 一.下载附件 地址:链接: https://pan.baidu.com/s/1nuQ4NgP  密码: 4pbu 二.将附件中的CropAvatar.php放到自己程序目录extend/org目录下,如果遇到 exif_imagetype 错误,需要打开 php.ini 中的 extension=php_exif.dll 三.common.php公共函数 找到应用程序目录下的com

  • Yii2组件之多图上传插件FileInput的详细使用教程

    Yii2组件之多图上传插件FileInput的详细使用教程

    在前面给大家写个有关文件上传的文章,包括最基本的yii2文件上传.异步上传到又拍云以及百度编辑器图片上传的问题,貌似不说点多图上传的就不完美. 今天介绍一款多图上传的插件 FileInput,至于为什么选中了TA作为我们上传的插件,一来这货跟Yii2有一腿,用起来方便:二来嘛,用这个插件不仅添加的时候好操作,修改的时候也可以直接通过异步的方式将图片悄无声息的删掉:最值得一提的是,界面效果融合了bootstrap,清爽简洁美观,看起来舒服. 说重点,看具体步骤 首先还是先安装组件 复制代码 代码如

  • Vue的移动端多图上传插件vue-easy-uploader的示例代码

    Vue的移动端多图上传插件vue-easy-uploader的示例代码

    前言 这段时间赶项目,需要用到多文件上传,用Vue进行前端项目开发.在网上找了不少插件,都不是十分满意,有的使用起来繁琐,有的不能适应本项目.就打算自己折腾一下,写一个Vue的上传插件,一劳永逸,以后可以直接使用. 目前vue-easy-uploader已上传到GitHub和NPM,使用起来方便简单,不需要繁琐的配置即可投入生产,不过需要后端配合,实现上传接口. 本项目GitHub地址: https://github.com/quanzaiyu/vue-easy-uploader 本项目NPM地

  • bootstrap fileinput 上传插件的基础使用

    bootstrap fileinput 上传插件的基础使用

    前言: 之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签,效果不忍直视,于是博主下定决心要找一个好看的上传组件换掉它.既然bootstrap开源,那么社区肯定有很多关于它的组件,肯定也有这种常见的上传组件吧.经过一番查找,功夫不负有心人,还是被博主找到了这个组件:bootstrap fileinput.关于这个组件的简单应用,基于BootStrap Me

  • 如何在vue3.0+中使用tinymce及实现多图上传文件上传公式编辑功能

    如何在vue3.0+中使用tinymce及实现多图上传文件上传公式编辑功能

    相关文档 本文部分内容借鉴: https://www.cnblogs.com/zhongchao666/p/11142537.html tinymce中文文档: http://tinymce.ax-z.cn/ 安装tinymce 1.安装相关依赖 yarn add tinymce || npm install tinymce -S yarn add @tinymce/tinymce-vue || npm install @tinymce/tinymce-vue -S 2.汉化编辑器前往此地址下载

  • yii2多图上传组件的使用教程

    最近在使用yii2开发一个表单页面的时候,有多图上传的需求,稍微找了找这方面的组件,基本都安利fileInput这个组件,于是就尝试着使用这个库来完成后端表单页面的多图上传功能.使用的过程中发现还是有不少小细节需要注意的,于是记录一下使用的过程. yii2-widget-fileinput这个库的github地址在这里,安装的部分就很常规了,按文档走就可以了. 我们来看官方文档展示的几个常规操作: use kartik\widgets\FileInput // or 'use kartikile

随机推荐