插件下载地址：

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

随机推荐

Java 工厂方法模式
在工厂对象上调用创建方法,生成接口的某个实现的对象通过这种方式,接口与实现分离方法接口 /** * 方法接口 */ public interface Service { void method1( ...
cf1066F Yet Another 2D Walking (贪心+dijkstra)
易证我们走的时候只会从某一层的某端点走向另一端点.然后走向下一层的某端点.. 所以建图然后dijkstra就行了调了一年以后发现dijkstra写错了 #include<bits/stdc++ ...
【bzoj3224】 Tyvj1728—普通平衡树
http://www.lydsy.com/JudgeOnline/problem.php?id=3224 (题目链接) 题意 1. 插入x数:2. 删除x数(若有多个相同的数,因只删除一个):3. 查 ...
上传文件到aws的s3存储
只要有aws-cli客户端就可以上传文件到aws的S3存储.可以在任意机器上.这里以centos为例. 1.安装python.pip. # yum install -y python python-p ...
Link Cut Tree 总结
Link-Cut-Tree Tags:数据结构 ##更好阅读体验:https://www.zybuluo.com/xzyxzy/note/1027479 一.概述 $LCT$,动态树的一种,又可以 ...
【CH4201】楼兰图腾
题目大意:给定一个长度为 N 的序列,从序列中任意挑出三个数,求满足中间的数字值最小(最大)有多少种情况. 题解:建立在值域上的树状数组,从左到右扫描一遍序列,统计出每个点左边有多少个数大于(小于)该 ...
Mac OS利用ssh访问ubuntu虚拟机及云端操作
1.桥接模式将该虚拟机的网口设置成桥接模式(Bridged Adapter),以确保主机可以ping通虚拟机: 2.安装ssh 在ubuntu虚拟机上安装ssh server: sudo apt-g ...
shell脚本中自定义日志记录到文件
自定义日志函数和前期变量 # adirname - return absolute dirname of given file adirname() { odir=`pwd`; cd `dirname ...
sql数据库连接字符串在APP.config配置文件内的两种写法
第一种方法写法: <configuration> <appSettings> <add key="connectionstring" value=& ...
bzoj千题计划248：bzoj3697: 采药人的路径
http://www.lydsy.com/JudgeOnline/problem.php?id=3697 点分治路径0改为路径-1 g[i][0/1] 和 f[i][0/1]分别表示当前子树和已 ...

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