插件下载地址：

https://github.com/kartik-v/bootstrap-fileinput/

官方DEMO查看：

http://plugins.krajee.com/file-basic-usage-demo

JQ上传插件汇总：http://www.jq22.com/jquery-plugins%E4%B8%8A%E4%BC%A0-1-jq

图片预览上传插件bootstrap-fileinput.js

http://www.jq22.com/jquery-info15397

插件描述：bootstrapfileinput预览上传图片并使用FmData上传，上传url根据实际情况填写

引入css

<link href="css/bootstrap.min.css" rel="stylesheet">

<link href="css/bootstrap-fileinput.css" rel="stylesheet">

引入js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script src="js/bootstrap-fileinput.js"></script>
<script type="text/javascript">
    $(function() {
        //比较简洁，细节可自行完善        
        $('#uploadSubmit').click(function() {
            var data = new FormData($('#uploadForm')[0]);
            $.ajax({
                url: 'xxx/xxx',
                type: 'POST',
                data: data,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function(data) {
                    console.log(data);
                    if (data.status) {
                        console.log('upload success');
                    } else {
                        console.log(data.message);
                    }
                },
                error: function(data) {
                    console.log(data.status);
                }
            });
        });
    })
</script>

由于工作需要使用Bootstrap的FileInput插件，在此分享下插件的使用方法

直接上代码

fileinput.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" href="css/bootstrap.min.css" />

        <link rel="stylesheet" href="css/fileinput.css" />

    </head>

    <body>

        <script type="text/javascript" src="js/jquery.js"></script>

        <script type="text/javascript" src="js/bootstrap.min.js"></script>

        <script type="text/javascript" src="js/fileinput.js" ></script>

        <script type="text/javascript" src="js/fileinput_locale_zh.js" ></script>

        <label class="control-label">Select File</label>

        <input id="input-2" name="input2" type="file" class="file-loading">

        <script type="text/javascript">

        var ctrlName = 'input-2';

        var control = $('#' + ctrlName); 

        control.fileinput({

            uploadUrl:'http://localhost:8080/upload.php',

            showCaption: false,

            showCancel:false,

            showUploadedThumbs:false,

            showClose:false,

            autoReplace:true,

            maxFileCount:1,

            overwriteInitial:true,

            showUploadedThumbs:false,

            language:'zh',

            initialPreview:"<img src='/back_t.jpg' class='file-preview-image' />",

            initialPreviewCount:1,

            initialPreviewShowDelete:false,

            layoutTemplates:{

                 actions: '<div class="file-actions">\n' +

        '    <div class="file-footer-buttons">\n' +

        '    </div>\n' +

        '    <div class="file-upload-indicator" tabindex="-1" title="{indicatorTitle}">{indicator}</div>\n' +

        '    <div class="clearfix"></div>\n' +

        '</div>'

            }

        }).on('fileuploaded', function(event, data, previewId, index){ console.log(data.response.message); });

        </script>

    </body>

</html>

uploadFile.php

<?php

if ($_FILES['input2']["type"] == "image/png") {

    echo "{\"code\":0, \"message\":\"upload success!\"}";

} else {

    echo "{\"code\":-1, \"error\":\"Invalid file format\"}";

}

?>

使用截图

上传成功

php 应用 bootstrap-fileinput 上传文件 插件 操作的方法

//先加载插件所需要的 js 、css 文件

  1. <link href="css/fileinput.css" rel="stylesheet" type="text/css" />
  2. <script src="js/fileinput.js"type="text/javascript"></script>
  3. <script src="js/fileinput_locale_zh.js" type="text/javascript"></script>
//然后 页面上代码      
 accept="image/*"  配置这个属性 （当点击选择文件时，自动过滤不是图片类型的文件）    name="image_data[]" 此属性（多图片上传时，可以将文件属性放到一个数组中）如图所示：
注 ：多图上传  要将ajax设置成  同步
 
 
 
  1. <input type="file" class="file"id="img_url1" name="image_data[]"accept="image/*" multiple>
  1. $("#img_url1").fileinput({
  2. language: 'zh',
  3. uploadUrl: "upload", //上传后台操作的方法
  4. uploadAsync: false, //设置上传同步异步 此为同步
  5. maxFileSize: 200,
  6. allowedFileExtensions: ['jpg'] //限制上传文件后缀
  7. });//初始化 后 上传插件的样子


php中方法

  1. public function upload(){
  2. if(IS_AJAX)
  3. {
  4. $images_name = '';
  5. $img_name = time();
  6. foreach($_FILES['image_data']['tmp_name'] as$k=>$v)
  7. {
  8. move_uploaded_file($v,$img_path.$img_name.$k.'.jpg');
  9. $images_name  .=  $img_name.$k.'.jpg'.',';
  10. }
  11. }
  12. return 1; //这个返回值必须要
  13. }

了解更多 请参考http://plugins.krajee.com/file-input/demo#image-management

bootstrap-fileinput的使用

bootstrap-fileinput是基于bootstrap的上传控件，此控件网上有很多例子。我照着例子做后发现请求无法提交到后台，反复测试后发现，不能禁止预览（showPreview要设置为true），禁止预览后fileuploaded则无法响应(实际情况是showPreview=false时, 即便是uploadAsync=true, 也是filebatchuploadsuccess响应返回结果。如果showPreview=true, uploadAsync=true, 才是fileuploaded响应返回结果)。

注意如果出现$("#xxxx").fileinput({}); 不生效的情况请将fileinput.js中最后几行注释掉：

/* $(document).ready(function () {
        var $input = $('input.file[type=file]'), count = $input.attr('type') ? $input.length : 0;
        if (count > 0) {
            $input.fileinput();
        }
    }); */

<link rel="stylesheet" href="css/bootstrapCSS/bootstrap.min.css">

<link rel="stylesheet" href="css/bootstrapCSS/bootstrap-theme.min.css">

<link rel="stylesheet" href="css/bootstrapCSS/fileinput.css" />

<div>

<input type="file" name="uploadfile" id="uploadfile" multiple class="file-loading" />

</div>

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/bootstrap/fileinput.js"></script>

<script type="text/javascript" src="js/bootstrap/fileinput_locale_zh.js"></script>

<script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>

<script type="text/javascript">

$("#uploadfile").fileinput({

                language: 'zh', //设置语言

                uploadUrl: "http://127.0.0.1/testDemo/fileupload/upload.do", //上传的地址

                allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀

                //uploadExtraData:{"id": 1, "fileName":'123.mp3'},

                uploadAsync: true, //默认异步上传

                showUpload: true, //是否显示上传按钮

                showRemove : true, //显示移除按钮

                showPreview : true, //是否显示预览

                showCaption: false,//是否显示标题

                browseClass: "btn btn-primary", //按钮样式

                dropZoneEnabled: false,//是否显示拖拽区域

                //minImageWidth: 50, //图片的最小宽度

                //minImageHeight: 50,//图片的最小高度

                //maxImageWidth: 1000,//图片的最大宽度

                //maxImageHeight: 1000,//图片的最大高度

                //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小

                //minFileCount: 0,

                maxFileCount: 10, //表示允许同时上传的最大文件个数

                enctype: 'multipart/form-data',

                validateInitialCount:true,

                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",

                msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

            });

//异步上传返回结果处理

$('#uploadfile').on('fileerror', function(event, data, msg) {

            console.log(data.id);

            console.log(data.index);

            console.log(data.file);

            console.log(data.reader);

            console.log(data.files);

            // get message

            alert(msg);

});

//异步上传返回结果处理

$("#uploadfile").on("fileuploaded", function (event, data, previewId, index) {

               console.log(data.id);

               console.log(data.index);

               console.log(data.file);

               console.log(data.reader);

               console.log(data.files);

                var obj = data.response;

                alert(JSON.stringify(data.success));

            });

//同步上传错误处理

       $('#uploadfile').on('filebatchuploaderror', function(event, data, msg) {

            console.log(data.id);

            console.log(data.index);

            console.log(data.file);

            console.log(data.reader);

            console.log(data.files);

            // get message

            alert(msg);

         });

   //同步上传返回结果处理

   $("#uploadfile").on("filebatchuploadsuccess", function (event, data, previewId, index) {

           console.log(data.id);

               console.log(data.index);

               console.log(data.file);

               console.log(data.reader);

               console.log(data.files);

                var obj = data.response;

                alert(JSON.stringify(data.success));

      });

//上传前

$('#uploadfile').on('filepreupload', function(event, data, previewId, index) {

        var form = data.form, files = data.files, extra = data.extra,

            response = data.response, reader = data.reader;

        console.log('File pre upload triggered');

    });

</script>

经查资料得知，异步上传处理错误和返回结果要处理fileerror和fileuploaded方法；同步上传处理错误和返回结果filebatchuploaderror和filebatchuploadsuccess方法

***Bootstrap FileInput插件的使用经验汇总的更多相关文章

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

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

  2. bootstrap fileinput插件使用感悟

    bootstrap fileinput 的填坑感悟              这个插件在demo的网站地址http://plugins.krajee.com/file-preview-icons-de ...

  3. bootstrap+fileinput插件实现可预览上传照片功能

    实际项目中运用: 功能:实现上传图片,更改上传图片,移除图片的功能 <!DOCTYPE html> <html> <head> <meta charset=& ...

  4. 导入Excel 文件（图片和文字）NPOI+BootStrap fileinput 插件 的结合使用

    1.页面代码: <!DOCTYPE html><html><head> <meta name="viewport" content=&qu ...

  5. BootStrap FileInput 插件实现多文件上传前端功能

    <!DOCTYPE html> <html> <head> <title>文件上传</title> <meta charset=&qu ...

  6. JS文件上传神器bootstrap fileinput详解

    Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一 ...

  7. Bootstrap FileInput中文API整理

    这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档,方便自己今后使用,也希望能给大家带来帮助,如有错误,希 ...

  8. Bootstrap FileInput中文API文档

    Bootstrap FileInput中文API整理 这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档, ...

  9. 【转】Bootstrap FileInput中文API整理

    Bootstrap FileInput中文API整理 这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档, ...

随机推荐

  1. MT【168】还是两根法

    设二次函数$f(x)=ax^2+bx+c(a>0)$,方程$f(x)=x$的两根$x_1,x_2$满足$0<x_1<x_2<\dfrac{1}{a}$,(Ⅰ)当$x\in(0, ...

  2. Spring点滴十一：Spring中BeanFactoryPostProcessor和BeanPostProcessor区别

    Spring中BeanFactoryPostProcessor和BeanPostProcessor都是Spring初始化bean时对外暴露的扩展点.两个接口从名字看起来很相似,但是作用及使用场景却不同 ...

  3. 【bzoj2875】 Noi2012—随机数生成器

    http://www.lydsy.com/JudgeOnline/problem.php?id=2875 (题目链接) 题意 求${X_{n}}$. Solution 矩乘板子,这里主要讲下会爆lon ...

  4. alpine编译安装tengine，并使用supervisor启动

    Alpine是一个小型的linux系统,官方docker镜像只有不到5MB,非常适合作为容器镜像. Alpine Linux is a security-oriented, lightweight L ...

  5. python Popen卡死问题

    程序经常卡死,定位了半天才定位到原因,原来是Popen导致的卡死: 程序如下: s = subprocess.Popen([*,*,*], stdout=subprocess.PIPE) ret = ...

  6. CSS 笔记(一)

    学习了张鑫旭大神的浮动教程,记一下笔记. 浮动最开始是为了文字环绕图片效果. 浮动会破坏父元素的包裹. 清除浮动:在父元素加上clearfix(after不兼容ie6 7,zoom为ie6 7下方法) ...

  7. OpenStack 存储服务 Cinder介绍和控制节点部署（十五）

    Cinder介绍 OpenStack块存储服务(cinder)为虚拟机添加持久的存储,块存储提供一个基础设施为了管理卷,以及和OpenStack计算服务交互,为实例提供卷.此服务也会激活管理卷的快照和 ...

  8. .net 里面打不出来ConfigurationManager

    ConfigurationManager 这个东东是读取配置文件时需要的. 首先要引用命名空间里面 using System.Configuration; 其次呢,在解决方案的引用里,单机右键进行添加

  9. bzoj千题计划295：bzoj3140: [Hnoi2013]消毒

    http://www.lydsy.com/JudgeOnline/problem.php?id=3140 如果只有两维,那就是二分图最小点覆盖 现在是三维,但是a*b*c<=5000,说明最小的 ...

  10. bzoj千题计划218：bzoj2333: [SCOI2011]棘手的操作

    http://www.lydsy.com/JudgeOnline/problem.php?id=2333 上次那个是线段树,再发一个左偏树 维护两种左偏树 第一种是对每个联通块维护一个左偏树 第二种是 ...