Bootstrap+PHP实现多图上传功能实例详解


Posted in PHP onApril 08, 2018

使用bootstrap界面美观,可预览,可拖拽上传,可配合ajax异步或同步上传,下面是效果图:

Bootstrap+PHP实现多图上传功能实例详解

Bootstrap+PHP实现多图上传功能实例详解

前端代码:fileinput.html

<!DOCTYPE html>
<!-- release v4.1.8, copyright 2014 - 2015 Kartik Visweswaran -->
<html lang="en">
 <head>
  <meta charset="UTF-8"/>
  <title>bootstrap多图上传</title>
  <link href="/public/index/fileinput/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
  <link href="/public/index/fileinput/css/fileinput.css" rel="external nofollow" media="all" rel="stylesheet" type="text/css" />
  <script src="/public/index/fileinput/js/jquery-2.0.3.min.js"></script>
  <script src="/public/index/fileinput/js/fileinput.js" type="text/javascript"></script>
  <script src="/public/index/fileinput/js/bootstrap.min.js" type="text/javascript"></script>
  <!-- 中文化 -->
  <script src="/public/index/fileinput/js/fileinput_locale_zh.js" type="text/javascript"></script>
 </head>
 <body>
  <div class="container kv-main">   
   <br>
   <form enctype="multipart/form-data">    
    <div class="form-group">
     <!-- 初始化插件 -->
     <input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2" name="images">
    </div>
    
   </form>
  </div>
 </body>
 <script>
 // 初始化filleinput控件 第一次初始化
 function initFileInput(ctrlName, uploadUrl){
  var control = $('#'+ctrlName);
  control.fileinput({
   language: 'zh', //设置语言
   uploadUrl:uploadUrl, //上传的地址
   allowedFileExtensions:['jpg','png'], //接收的文件后缀
   showUpload:true, //是否显示上传按钮
   showCaption:false, //是否显示标题
   maxFileSize: 1000, //图片最大尺寸kb 为0不限制
   maxFilesNum: 3,  //最多上传图片
   overwriteInitial: false,//不覆盖已上传的图片
   browseClass: "btn btn-info", //按钮样式 
   dropZoneEnabled: true,//是否显示拖拽区域
   previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
   msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
  });
 }
 //初始化fileinput控件,第一次初始化 (控件id,上传地址)
 initFileInput("file-1", "uploadImg");

 // 监听事件
 $("#file-1").on("fileuploaded", function (event, data, previewId, index) {
  // 上传地址
  console.log(data);
 });
 </script>
</html>

后台代码:

/*
 * bootst多图上传
 */
 public function fileinput()
 {
  return $this->fetch();
 }
 public function uploadImg()
 {
  // var_dump($_FILES);
  // 获取表单上传文件 
  $file = request()->file('images');
  // 移动到框架应用根目录/public/uploads/img 目录下
  $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads/img');
  if($info){
   // 成功上传后 获取上传信息
   $data['response'] = $info->getSaveName();
   return json($data);
   //图片上传成功,以下可对数据库操作
   // ......
  }else{
   // 上传失败获取错误信息
   echo $file->getError();
  }
 }

总结

以上所述是小编给大家介绍的Bootstrap+PHP实现多图上传功能实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

PHP 相关文章推荐
动态网站web开发 PHP、ASP还是ASP.NET
Oct 09 PHP
apache php模块整合操作指南
Nov 16 PHP
php inc文件使用的风险和注意事项
Nov 12 PHP
php常用图片处理类
Mar 16 PHP
PHP简单获取及判断提交来源的方法
Apr 22 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
Apr 26 PHP
浅析php静态方法与非静态方法的用法区别
May 17 PHP
PHP封装的多文件上传类实例与用法详解
Feb 07 PHP
php 函数使用可变数量的参数方法
May 02 PHP
PHP基于回溯算法解决n皇后问题的方法示例
Nov 07 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
Jan 10 PHP
解析laravel使用workerman用户交互、服务器交互
Apr 28 PHP
PHP实现的获取文件mimes类型工具类示例
Apr 08 #PHP
PHP面向对象之里氏替换原则简单示例
Apr 08 #PHP
PHP面向对象五大原则之依赖倒置原则(DIP)详解
Apr 08 #PHP
PHP面向对象五大原则之里氏替换原则(LSP)详解
Apr 08 #PHP
PHP实现微信红包金额拆分试玩的算法示例
Apr 07 #PHP
PHP面向对象五大原则之接口隔离原则(ISP)详解
Apr 04 #PHP
PHP面向对象五大原则之开放-封闭原则(OCP)详解
Apr 04 #PHP
You might like
MVC模式的PHP实现
2006/10/09 PHP
PHP中Header使用的HTTP协议及常用方法小结
2014/11/04 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
利用PHP生成CSV文件简单示例
2016/12/21 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
PHP Pipeline 实现中间件的示例代码
2020/04/26 PHP
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
JS面向对象编程 for Cookie
2010/09/19 Javascript
js实现常用排序算法
2016/08/09 Javascript
js使用原型对象(prototype)需要注意的地方
2017/08/28 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
vue-cli3 DllPlugin 提取公用库的方法
2019/04/24 Javascript
实例讲解JavaScript 计时事件
2020/07/04 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
[00:52]DOTA2第二届亚洲邀请赛预选赛宣传片
2017/01/13 DOTA
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
Python实现的银行系统模拟程序完整案例
2019/04/12 Python
Python用字典构建多级菜单功能
2019/07/11 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
python爬取代理ip的示例
2020/12/18 Python
css3实现一个div设置多张背景图片及background-image属性实例演示
2017/08/10 HTML / CSS
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
canvas实现图片镜像翻转的2种方式
2020/07/22 HTML / CSS
小学国庆节活动方案
2014/02/11 职场文书
低碳环保倡议书
2014/04/14 职场文书
525心理活动总结
2014/07/04 职场文书
2014最新党员批评与自我批评材料
2014/09/24 职场文书
幼师辞职信怎么写
2015/02/27 职场文书
应届毕业生自荐信
2015/03/04 职场文书
考研导师推荐信范文
2015/03/27 职场文书
python 自动刷新网页的两种方法
2021/04/20 Python
Python函数式编程中itertools模块详解
2021/09/15 Python
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技