插件及源代码可以在这里下载 http://www.jq22.com/jquery-info5231
下面是根据下载的demo进行补充：
使用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="stylesheet">

        <link href="/public/index/fileinput/css/fileinput.css" 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 fileinput 实现多图上传 这是ajax上传，只能单张单张图片地上传的更多相关文章

  1. 使用formData上传文件，ajax上传

    项目是vue项目,直接贴部分代码了: html: <input type="file" name="fileTable" @change="ch ...

  2. Django框架 之 Form表单和Ajax上传文件

    Django框架 之 Form表单和Ajax上传文件 浏览目录 Form表单上传文件 Ajax上传文件 伪造Ajax上传文件 Form表单上传文件 html 1 2 3 4 5 6 7 <h3& ...

  3. yii 上传视频（ajax）

    实现一个功能:提交表单的时候,需要上传视频,把视频上传到oss上,然后把url作为表单值传到后端保存到数据库.需要ajax异步实现. 遇到了一个这样报错:Bad Request: 您提交的数据无法被验 ...

  4. 结合bootstrap fileinput插件和Bootstrap-table表格插件，实现文件上传、预览、提交的导入Excel数据操作流程

    1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用, ...

  5. Laravel5多图上传和Laravel5单图上传的功能实现

    Laravel5文件上传默认只能上传一张图片,但是有的时候我们需要一次性上传多图就不行了,我在网上看了很多关于laravel5图片上传的文章,很多都只是介绍laravel5单图上传,多图片上传介绍少之 ...

  6. 基于HTML5的可预览多图片Ajax上传

    一.关于图片上传什么什么的 在XHTML的时代,我们使用HTML file控件上传图片一次只能上传一张.要一次上传多图,做法是借助于flash.例如swfupload.js.可惜,使用复杂的点,比如f ...

  7. summernote富文本图片上传，增加视频上传功能、批量上传方法

    Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器,基于 jQuery 和 Bootstrap 构建,支持快捷键操作,提供大量可定制的选项. 但是却只有图片上传功能,没有视频上传 ...

  8. 2.bootstrap练习笔记-轮播图

    bootstrap练习笔记-轮播图 1.要使用轮播图,首先要将其放在一个主div里面 设置id为myCaroysel class为carousel slide 设置id是标识这个div是轮播图,等到l ...

  9. 基于HTML5和JSP实现的图片Ajax上传和预览

    本文对如何实现使用Ajax提交"multipart/form"格式的表单数据,已经如何在图片上传之前,在浏览器上进行预览.使用的主要相关技术HTML5的FILE API,XMLHt ...

随机推荐

  1. 1.1.19 Word中表格自动断开

    1.修改前效果如下图所示: 2.先右键点击表格的左上角的“被正方形包着的四方箭头”, 如下图中的序号1,在出现的快捷菜单上点击[表格属性],出现[表格属性]对话框. 3.将参数设置成“允许跨页断行”, ...

  2. 关于set_input_delay的用法分析

    关于set_input_delay的用法分析 数据分为了系统同步和源同步: 对于下降沿采集数据的情况,当下降沿时钟延迟dv_afe到达无效数据最左端时,图中1位置,为最小延时,即采集不到有效数据的临界 ...

  3. npm cnpm

    npm 1.说明: npm(node package manager)是nodejs的包管理器,用于node插件管理(包括安装.卸载.管理依赖等) 2.使用npm安装插件:命令提示符执行npm ins ...

  4. DotNetBar创建的Ribbon、标签式多文档界面

    1.创建一个form作为主窗体,继承自:DevComponents.DotNetBar.RibbonForm 设置属性:IsMdiContainer为true 2.创建一个form,作为子窗体,也继承 ...

  5. read()、write()返回 Input/output error, Device or resource busy解决

    遇到的问题,通过I2C总线读.写(read.write)fs8816加密芯片,报错如下: read str failed,error= Input/output error! write str fa ...

  6. 为嵌入式全志V3s荔枝派板卡添加USB MT7601U（小米随身WIFI）驱动

    折腾了了一天终于scan出环境热点了,感觉本来挺简单的事情,网上教程一大把还费了一天的劲,很丧.不过网上教程虽多,但是还还是有些不同之处的,现在特意总结一下 全志V3s荔枝派板卡 添加该驱动的过程. ...

  7. [C#]WinForm 中 comboBox控件之数据绑定

    [C#]WinForm 中 comboBox控件之数据绑定 一.IList 现在我们直接创建一个List集合,然后绑定 IList<string> list = new List<s ...

  8. PV、IV、UV

    PV  访问量 UV 独立访客 IV 独立ip数 qps 流量

  9. JAVA Maven 安装 jar 包到本地仓库，以 Oracle11g 的访问包 为例

    maven 作为 java 的首选包管理工具,使我们在创建和维护项目的时候变得十分简单,但是 maven 仓库并不是拥有的一切 jar 包的, 很多 jar 包由于收费或者版权什么的其他原因,并不存在 ...

  10. JAVA 注解，泛型，反射获取泛型，并实例化

    JAVA 的泛型加大了 编程的灵活性,在配合上反射,可以让我们省去大量的重复代码,当你用 SpringBoot 整合 JPA 的时候 你会发现,你的 DAO 层只需要继承 BaseDao,在显示标明泛 ...