插件下载地址：

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都不是很全,所以想着整理一份比较详细的文档, ...

随机推荐

【刷题】LOJ 6010 「网络流 24 题」数字梯形
题目描述给定一个由 $n$ 行数字组成的数字梯形如下图所示.梯形的第一行有 $m$ 个数字.从梯形的顶部的 $m$ 个数字开始,在每个数字处可以沿左下或右下方向移动,形成一条从梯形的顶至 ...
【Revit API】创建共享参数
话不多说,直接上代码 var app = doc.Application; app.SharedParametersFilename = sharedParamFilePath; Definition ...
洛谷 P5162 WD与积木解题报告
P5162 WD与积木题目背景 WD整日沉浸在积木中,无法自拔-- 题目描述 WD想买$n$块积木,商场中每块积木的高度都是$1$,俯视图为正方形(边长不一定相同).由于一些特殊原因,商家会 ...
bzoj4458 GTY的OJ (优先队列+倍增)
把超级钢琴放到了树上. 这次不用主席树了..本来以为会好写一点没想到细节更多(其实是树上细节多) 为了方便,对每个点把他的那个L,R区间转化成两个深度a,b,表示从[a,b)选一个最小的前缀和(到根的 ...
Python奇思妙想（胡思乱想）
1.一道简单习题引发的思考深坑(通过globals及字典推导式获取类实例化了哪些对象) 初衷就是为了打印如下的信息: 小明,10岁,男,最爱大保健小明,10岁,男,开车去东北小明,10岁,男,最爱大保 ...
Redis缓存与springboot集成
注意点:
JAVA (字符串学习)
String类 String类是不可改变的,所以你一旦创建了String对象,那它的值就无法改变了. 如果需要对字符串做很多修改,那么应该选择使用StringBuffer&StringBuil ...
Vue单页面应用阻止浏览器记住密码
Vue单页面应用阻止浏览器记住密码 ——IT唐伯虎摘要: Vue单页面应用阻止浏览器记住密码. 现象1:路由切换时再次提示“是否记住密码” 登录页面有个密码输入框,输入账号密码进行登录: 登录完成后 ...
vue.js react.js angular.js三者比较
react和vue有许多相似之处,他们都有:1.使用虚拟DOM2.提供了响应式(reactive)和组件化(composable)的视图组件3.将注意力集中保持在核心库,而将其他功能如路由和全局状态管 ...
hdu 2433 Travel
http://acm.hdu.edu.cn/showproblem.php?pid=2433 题意: 求删除任意一条边后,任意两点对的最短路之和以每个点为根节点求一个最短路树, 只需要记录哪些边在最 ...

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