插件下载地址：

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

<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>

<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 文件

<link href="css/fileinput.css" rel="stylesheet" type="text/css" />
<script src="js/fileinput.js"type="text/javascript"></script>
<script src="js/fileinput_locale_zh.js" type="text/javascript"></script>

//然后页面上代码

accept="image/*" 配置这个属性（当点击选择文件时，自动过滤不是图片类型的文件） name="image_data[]" 此属性（多图片上传时，可以将文件属性放到一个数组中）如图所示：

注：多图上传要将ajax设置成同步

<input type="file" class="file"id="img_url1" name="image_data[]"accept="image/*" multiple>

$("#img_url1").fileinput({
language: 'zh',
uploadUrl: "upload", //上传后台操作的方法
uploadAsync: false, //设置上传同步异步此为同步
maxFileSize: 200,
allowedFileExtensions: ['jpg'] //限制上传文件后缀
});//初始化后上传插件的样子

php中方法

public function upload(){
if(IS_AJAX)
{
$images_name = '';
$img_name = time();
foreach($_FILES['image_data']['tmp_name'] as$k=>$v)
{
move_uploaded_file($v,$img_path.$img_name.$k.'.jpg');
$images_name .= $img_name.$k.'.jpg'.',';
}
}
return 1; //这个返回值必须要
}

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插件的使用经验汇总的更多相关文章

结合bootstrap fileinput插件和Bootstrap-table表格插件，实现文件上传、预览、提交的导入Excel数据操作流程
1.bootstrap-fileinpu的简单介绍在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用, ...
bootstrap fileinput插件使用感悟
bootstrap fileinput 的填坑感悟这个插件在demo的网站地址http://plugins.krajee.com/file-preview-icons-de ...
bootstrap+fileinput插件实现可预览上传照片功能
实际项目中运用: 功能:实现上传图片,更改上传图片,移除图片的功能 <!DOCTYPE html> <html> <head> <meta charset=& ...
导入Excel 文件（图片和文字）NPOI+BootStrap fileinput 插件的结合使用
1.页面代码: <!DOCTYPE html><html><head> <meta name="viewport" content=&qu ...
BootStrap FileInput 插件实现多文件上传前端功能
<!DOCTYPE html> <html> <head> <title>文件上传</title> <meta charset=&qu ...
JS文件上传神器bootstrap fileinput详解
Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一 ...
Bootstrap FileInput中文API整理
这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档,方便自己今后使用,也希望能给大家带来帮助,如有错误,希 ...
Bootstrap FileInput中文API文档
Bootstrap FileInput中文API整理这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档, ...
【转】Bootstrap FileInput中文API整理
Bootstrap FileInput中文API整理这段时间做项目用到bootstrap fileinput插件上传文件,在用的过程中,网上能查到的api都不是很全,所以想着整理一份比较详细的文档, ...

随机推荐

Luogu4783 【模板】矩阵求逆（高斯消元）
对矩阵进行高斯消元直至消为单位矩阵,并在另一个单位矩阵上对其做同样的操作即可. 模意义下的高斯消元可以直接计算系数来避免整行的辗转相除. 还不知道有什么用. #include<iostream& ...
【刷题】BZOJ 1823 [JSOI2010]满汉全席
Description 满汉全席是中国最丰盛的宴客菜肴,有许多种不同的材料透过满族或是汉族的料理方式,呈现在數量繁多的菜色之中.由于菜色众多而繁杂,只有极少數博学多闻技艺高超的厨师能够做出满汉全席,而 ...
第一天进入博客这个神奇的领域在此%%%erosun
第一条博客水一水等会要找一下调博客模板独立动手,丰衣足食
springboot中radis配置和使用【进阶二】
1.yml文件配置 #redis哨兵模式配置 redis: namespace: xxx:xxx:redis connection: cacheRedis: database: 0 timeout: ...
net 和Mono 构建的HTTP服务框架
Nancy是一个基于.net 和Mono 构建的HTTP服务框架,是一个非常轻量级的web框架. 设计用于处理 DELETE, GET, HEAD, OPTIONS, POST, PUT 和 PATC ...
【模板】BM + CH（线性递推式的求解，常系数齐次线性递推）
这里所有的内容都将有关于一个线性递推: $f_{n} = \sum\limits_{i = 1}^{k} a_{i} * f_{n - i}$,其中$f_{0}, f_{1}, ... , f_{k ...
以Java的视角来聊聊BIO、NIO与AIO的区别？
转: 以Java的视角来聊聊BIO.NIO与AIO的区别? 飞丫玲丫 17-07-2623:10 题目:说一下BIO/AIO/NIO 有什么区别?及异步模式的用途和意义? BIO(Blocking I ...
python的WSGI接口
WSGI:Web Server Gateway Interface. WSGI是为python语言定义的web服务器和web应用程序或框架之间的一种简单而实用的接口.wsgi是一个web组件的接口规范 ...
Excel：函数中的万金油：INDEX+SMALL+IF+ROW
很多人在Excel中用函数公式做查询的时候,都必然会遇到的一个大问题,那就是一对多的查找/查询公式应该怎么写?大多数人都是从VLOOKUP.INDEX+MATCH中入门的,纵然你把全部的多条件查找 ...
[应用篇]第六篇 JSTL之自定义函数标签库
在之前的JSTL的总结中已经对函数标签库进行了一些说明,在这里我再一次重新整理一下! 自带函数标签库介绍引入该标签库的方法为: <%@ taglib prefix="fn&quo ...

***Bootstrap FileInput插件的使用经验汇总