插件下载地址：

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

随机推荐

poj2559 Largest Rectangle in a Histogram（单调栈）
Description A histogram is a polygon composed of a sequence of rectangles aligned at a common base l ...
String类的一些细节
先看一段代码: public static void main(String[] args) { String a = "a"+"b"+1; ...
Docker一些常用命令
1.启动Docker服务 service docker start 2.查看所有镜像 docker images 3.查看正在运行的容器 docker ps 4.查看所有容器 docker ps -a ...
浅谈平衡树splay
首先splay和treap不一样,treap通过随机数来调整树的形态.但splay不一样,再每插入或操作一次后,你都会把他旋转到根,再旋转过程中树的形态会不断改变,这样来达到均摊效果常数据大. 来看 ...
【BZOJ1053】[HAOI2007]反素数（搜索）
[BZOJ1053][HAOI2007]反素数(搜索) 题面 BZOJ 洛谷题解大力猜一下用不了几个质因子,那么随便爆搜一下就好了. #include<iostream> #inclu ...
GO进程调度相关源码学习
启动流程 procresize流程 malloc.go Memory allocator sizeclass.go span按大小区分的类型定义 mbitmap.go type and heap b ...
Java: 扩大字节缓存区的大小，提升AIO的处理性能(并发性能)
前些日了,对AIO与NIO的并发性能进行了比较,在低并发的情况下,NIO性能表现比AIO好一些,主要原因是,NIO中可以使用FileChannel.transferTo(long position, ...
CGI浏览器与服务器的交互
一直在做项目,跟着写前端后端,却没有思考一个问题:前端和后端为什么能够进行通信?为什么能够将HTML页面的内容传输给后台,然后又将结果反馈给前端? 寒假偶尔看到了这个问题,也解决了我的疑惑,这是基于C ...
vue实例的方法
1.mount挂载 vm.$mount('#app') 2.销毁 vm.$destroy() 3.刷新实例 vm.$forceUpdate() 4.更新后的操作 vm.$nextTick(functi ...
long的变量后面没有L加会有什么后果
不加L的话,默认就是int型了. 当给long赋值一个超过int范围的值的时候,会出问题. java中对字面的数值是以int的形式来表示的例如:long l= 6553555522222 报错:T ...

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