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

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

前端代码：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实现多图上传功能实例详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • thinkphp5使用bootstrapvalidator进行异步验证邮箱的示例

    本文介绍了thinkphp5使用bootstrapvalidator进行异步验证邮箱的示例,分享给大家,具体如下: js验证 /** * Created by HONGXIN on 2017-10-23. */ $(function () { $('form').bootstrapValidator({ message: 'This value is not valid', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'g

  • Thinkphp和Bootstrap结合打造个性的分页样式(推荐)

    Thinkphp和Bootstrap结合打造个性的分页样式(推荐)

    先吐槽一下ThinkPHP3.1版的分页样式,虽然看起来也很简单大方,但是所有的页码全是使用简单的数字,之间的空隙比较小,不大容易点,还有那个"前5页"和"后5页"显得有点多余,因为点击当前显示第一页的"上一页"按钮会自然出来前5页. 3.1的分页效果是这个样子滴: 针对以上种种不太理想的情况,又加上最近学习了ThinkPHP5,在ThinkPHP5中提供了对BootStrap分页样式的完美支持,在thinkphp5中只要引入了BootStrap

  • PHP实现登录注册之BootStrap表单功能

    PHP实现登录注册之BootStrap表单功能

    前言 前面几篇简单介绍了一下前端与PHP的一些知识点,前端中表单提交是一个非常重要的模块,在本篇中我会介绍一些关于表单的知识,如果前面内容你掌握的不好并且没有大量的练习,我感觉你最好先把标签都记下来. 项目简介 登录与注册是我们在web开发中最常见的模块,也是我们日常生活中经常接触的功能.用户通过前端表单页面填写内容,通过POST方式提交到后台,然后经过PHP代码处理提交内容后,针对登录或者注册的逻辑继续操作. 登录与注册图解 BootStrap前端框架[ http://v3.bootcss.c

  • php bootstrap实现简单登录

    php bootstrap实现简单登录

    本文实例为大家分享了php bootstrap实现简单登录的方法,供大家参考,具体内容如下 所有文件 记住是获取name键值对 from 里面 action就是你的动作 signin.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" con

  • thinkphp框架page类与bootstrap分页（美化）

    bootstrap分样式使用方法这里写链接内容 <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" re

  • Bootstrap php制作动态分页标签

    Bootstrap php制作动态分页标签

    学习了下bootstrap,刚好在用分页,就自己写了一个分页,然后结合bootstrap样式展现. bootstrap的分页格式: <ul class="pagination"> <li><a href="#">«</a></li> <li class="active"><a href="#">1</a></li> &l

  • ThinkPHP 整合Bootstrap Ajax分页样式

    ThinkPHP 整合Bootstrap Ajax分页样式

    ThinkPHP Ajax分页代码 publicfunction index() { $where=array(); $name = I('name'); if(!empty($name)){ $where['name']= array('like','%'.(string)$name.'%'); } $Role=M('Role'); $count= $Role->where($where)->count();// 查询满足要求的总记录数 $Page =new \Think\AjaxPage(

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

    使用bootstrap界面美观,可预览,可拖拽上传,可配合ajax异步或同步上传,下面是效果图: 前端代码:fileinput.html <!DOCTYPE html> <!-- release v4.1.8, copyright 2014 - 2015 Kartik Visweswaran --> <html lang="en"> <head> <meta charset="UTF-8"/> <ti

  • Reactjs + Nodejs + Mongodb 实现文件上传功能实例详解

    Reactjs + Nodejs + Mongodb 实现文件上传功能实例详解

    目录 Reactjs + Nodejs + Mongodb 实现文件上传 概述 React + Node.js + Mongodb「上传文件」前后端项目结构 前端项目结构 Reactjs 前端部分 后端项目结构 后端项目结构 前端部分-上传文件 React + Axios 配置 React 环境 导入 bootstrap 到项目中 初始化 Axios 创建上传文件组件 创建 React 文件上传组件 将文件上传组件添加到App组件 上传文件配置端口 项目运行 后端部分 配置 Node.js 开发

  • PHP大文件分块上传功能实例详解

    本文实例讲述了PHP大文件分块上传功能.分享给大家供大家参考,具体如下: 前端代码 使用file.slice将文件进行分割,然后分别进行异步上传. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge&q

  • 最详细的文件上传下载实例详解(推荐)

    最详细的文件上传下载实例详解(推荐)

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用Servlet获取上传文件的输入流然后再解析里面的请求参数是比较麻烦,所以一般选择采用apache的开源工具common-fileupload这个文件上传组件.这个common-fileupload上传组件的jar包可以去apache官网上面下载,也可以在struts的lib文件夹下面找到,stru

  • Python疫情确诊折线图实现数据可视化实例详解

    Python疫情确诊折线图实现数据可视化实例详解

    目录 案例描述 实现步骤 一.导入模块 二.读取文件内容 三.json转换python 四.获取需要用到的数据 五.生成图表 六.关闭文件 案例描述 根据可参考数据,实现对疫情确诊人数数据的可视化. 利用json转换工具,将数据格式化,需要取出下面两部分的内容. 可视化效果图: 实现步骤 一.导入模块 导入可能用到的模块 import json from pyecharts.charts import Line 二.读取文件内容 打开相应的文件,使用变量us_data保存文件的内容 f_us =

  • Alfred + Gitee搭建免费图床的使用实例详解

    Alfred + Gitee搭建免费图床的使用实例详解

    目录 环境 工具下载 思路 使用 依赖 实现 创建Gitee图床环境 配置Alfred workflow 复制剪切板中的图片到指定路径 git命令提交图片 图片压缩 拼接图片地址 环境 系统: Mac 工具: Alfred, git, homebrew, pngpaste. 语言: perl 其他: Gitee 工具下载 gitee.com/serpmelon/i… 思路 使用Gitee仓库作为图床, 使用Alfred工作流简化上传图片流程, 并将上传图片地址转换为markdown格式输出到剪切

  • iOS开发中以application/json上传文件实例详解

    本文通过实例代码给大家讲解iOS中以application/json上传文件的形式,具体内容详情大家参考下本文. 在和sever后台交互的过程中.有时候.他们需要我们iOS开发者以"application/json"形式上传. NSString *accessUrl = [NSString stringWithFormat:@"%@/xxx",@"https://www.xxxxx.com:xxxx"]; NSMutableURLRequest

  • JS与Ajax Get和Post在使用上的区别实例详解

    get和post方法最大的不同在于: 1.get方法传值参数在url里面,而post参数放send里面 2.post方法必须加上 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 下面实例可以看get方法 xmlHttp.open("GET","for.php?text="+url,true); 在post里面表现为:

  • Java 文件上传的实例详解

    Java 文件上传的实例详解 java 文件上传 Java文件上传,介绍几种常用的方法,也是经过本人亲手调试过的 1.jspsmartupload 这个组件用起来是挺方便的,不过就是只适合小文件上传,如果大文件上传的话就不行,查看了一下他的代码,m_totalBytes = m_request.getContentLength(); m_binArray = new byte[m_totalBytes];居然把整个上传文件都读到内存去了,那如果是上传几十M的文件,同时几个用户上传,服务器稳挂,不

  • Java 中HttpURLConnection附件上传的实例详解

    Java 中HttpURLConnection附件上传的实例详解 整合了一个自己写的采用Http做附件上传的工具,分享一下! 示例代码: /** * 以Http协议传输文件 * * @author mingxue.zhang@163.com * */ public class HttpPostUtil { private final static char[] MULTIPART_CHARS = "-_1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJK

随机推荐