BootStrap Fileinput的使用教程
转载 & & 作者：尼古拉斯-托尔斯泰-赵四
bootstrap-fileinput是基于bootstrap的上传控件。此控件在网上可以找到很多例子，接下来通过本文给大家分享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" /&
&input type="file" name="uploadfile" id="uploadfile" multiple class="file-loading" /&
&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.
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.
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.
console.log('File pre upload triggered');
经查资料得知，异步上传处理错误和返回结果要处理fileerror和fileuploaded方法；同步上传处理错误和返回结果filebatchuploaderror和filebatchuploadsuccess方法
以上所述是小编给大家介绍的BootStrap Fileinput的使用教程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具Bootstrap&fileinput&事件+常用参数
bootstrap造福了前端手残，审美不高的ＵＩ技术人员。用Bootstrap
渲染出来的界面简约大气，可是呢又又许多地方比较头疼，例如组织架构的树形，动态数据表格，上传的效果。介绍几款插件可轻松方便解决这些头痛的问题。一言不合就上图，话不多说，如下图所示：
左侧是一个zTree，是一个没有文件夹icon图标的tree,zTree很强大，也比较方便，icon图片支持自定义。
官网API链接为：
打开链接，上面有下载zTree的js包，在项目中引入
jquery-2.2.2.js
jquery.ztree.core.min.js
Content/zTreeStyle.css等文件即可
zTree 初始化代码如下：
//直接被翻译了
//树形组织架构
//*************************
& &构建父分组
//*************************
& & function
CreateGroupTree(groupTree) {
& //tree配置
& var setting = {
& & & callback:
& & onClick: zTreeOnClick
&//点击事件
& & & view:
& & showIcon: false
&//文件夹icon 图标设为不可见
& var list = new Array();
& var node = new Object();
& node.id =
& node.name = "所有的组";
& node.children = CreateChildGroup(null,
groupTree);//递归查询所有的子节点
& list.push(node);
& //初始化tree
//groupTree为 tree的ID，list
为tree的json数组
& var treeObj = $.fn.zTree.init($("#groupTree"),
setting, list); &
& treeObj.expandAll(true);//默认展开所有的节点
//*************************
&构建子分组
//*************************
function CreateChildGroup(groupId, groupTree) {
& & if (groupTree != null
&& groupTree != undefined && groupTree.length != 0)
& var group = $.grep(groupTree, function (item)
& & & return
item.GroupParentId == groupId;
& var list = new Array();
& if (group != null && group.length != 0
&& group != undefined) {
$.each(group, function (index, item) {
& & var node = new
& & node.id = item.GroupId;
& & node.name = item.N
& & node.children =
CreateChildGroup(item.GroupId, groupTree);
& & list.push(node);
右边的是一个DataTables
jq插件，也是炒鸡炒鸡的方便，引用js,css配置好，分页，模糊查询全都有了，这个前几天已经分享过技术了链接在这：&
博主码字真的是非常非常的辛苦哎~~~~
今天要说的重点来了，是bootstrap fileinput,捣腾了一上午。bootstrap
fileinput支持多文件上传，非常方便，又简单，只需简单配置一些就OK，这个可以在项目管理NuGet包里找到bootstrap
fileinput这个安装在项目里就好了，第三方下载的，安全性不高，指不定什么时候出个幺蛾子，那就麻烦了。微软嘛还是比较周到安全的。
bootstrap fileinput
如下图所示：
fileinput参数配置如下：
html得注释起来，不然就直接编译成网页了--<img TYPE="face" src="http://simg.sinajs.cn/blog7style/images/common/sg_trans.gif" real_src ="http://www.sinaimg.cn/uc/myshow/blog/misc/gif/E___7401ZH00SIGG.gif" STYLE="line-height: 1.5; text-indent: 2"
ALT="Bootstrap&fileinput&事件+常用参数"
TITLE="Bootstrap&fileinput&事件+常用参数" />
<img src="http://simg.sinajs.cn/blog7style/images/common/sg_trans.gif" real_src ="http://s13.sinaimg.cn/mw690/0049rnGzgy72dsrjQm0fc&690" WIDTH="690" HEIGHT="104" STYLE="color: rgb(0, 0, 238);"
ALT="Bootstrap&fileinput&事件+常用参数"
TITLE="Bootstrap&fileinput&事件+常用参数" />
JavaScript:
&初始化fileinput控件（第一次初始化）
& &//ctrlName &为控件ID
&//uploadUrl
&上传URl，后台处理上传文件的地址
& & function
initFileInput(ctrlName, uploadUrl) {
& $("#"+ctrlName).fileinput({
& & & language:
'zh', //设置语言
& & & uploadUrl:
uploadUrl, //上传的地址
allowedFileExtensions : ['jpg', 'png','gif','bmp'],//接收的文件后缀
maxImageWidth: 1000,//图片的最大宽度
maxImageHeight:1000,//图片的最大高度
showUpload: false, //是否显示上传按钮
showCaption: false,//是否显示标题
showRemove:false,//是否显示移除按钮
showPreview:true,//是否显示文件预览
showClose:false,//是否线程预览的删除按钮
maxFileCount: 1, //表示允许同时上传的最大文件个数
maxFileSize: 0,//单位为kb,0表示不受限制
browseClass: "btn btn-primary", //按钮样式
previewFileIcon: ""
& //按钮上传成功后触发
& $('#inputImg').on('filebatchuploadcomplete',
function(event, files, extra) {
console.log('File batch upload complete');
&//按钮上传完触发
& $('#inputImg').on('fileuploaded',
function(event, data, previewId, index) {
& & & //data:
这是一个数据对象(关联数组)发送以下信息&
& & & //files:
上传的文件信息 & &
//response: ajax后台服务响应的内容
& & & //jqXHR:
jQuery XMLHttpRequest对象，响应报文
//previewId::每个文件的标识符的母公司缩略图预览窗口中的div元素
& & & //index:
从零开始的索引文件中文件的堆栈
& & & //if
(data.response.flag) {
& & & //刷新
&$("#inputImg").fileinput("refresh",{
&initialPreview:"& i m g & s r
c="+data.response.message+" width='200' height='200'
alt='Desert' title='Desert'&,
//上传成功后替换的img,但是，我启用这个之后，发现删除事件不起作用了，可能是哪里报错了吧，没有深入了解。但是如果是只有一张照片，那也无所谓，没有必要替换掉。
//注意：我上传图片是选择图片后，再点击上传直接传到服务器，存储了图片，所以我需要在照片上传到服务器后点击删除按钮，拿到图片的名称，然后再找到这个图片文件删除掉。
//要是只选择图片，没有点击上传，点击删除按钮，继续上传也不会有啥影响，虽然界面上会出现预览图片，但还不会将图片保存到服务器，因为你没有点上传按钮，所以不会提交到服务器
& //批量上传图片成功后触发
& $('#inputImg').on('filebatchuploadsuccess',
function(event, data, previewId, index) {
console.log('File batch upload complete');
& //小图标上传成功后移除触发
& $('#inputImg').on('filesuccessremove',
function(event, files, extra) {
//$("#inputImg").fileinput("refresh",{
& &initialPreview:""& i m g
& s rc="" width='200' height='200'
alt='Desert' title='Desert'&", //删除成功后为了不让界面变形，如果不启用initialPreview这个属性重写img标签，可以不用管这个，这个仅是个人见解，不完全正确
& & & //});
& $('#inputImg').on('filedeleted', function(event,
console.log('Key = ' + key);
& //点击删除按钮后，会跳入重置的方法
& $('#inputImg').on('filereset', function(event)
console.log("filereset");
& //按钮移除后触发
& $('#inputImg').on('filecleared', function(event)
console.log('File batch upload complete');
& //图片右上角的X移除
& $('#inputImg').on('fileclear', function(event)
& $('#inputImg').on('filedeleted', function(event,
console.log('Key = ' + key);
& $(function () {
& initFileInput("inputImg",
"/FileUpload/Upload"); & &
//inputImg为input上传控件的ID，第二个为url
终于码完了，手都酸了~一个上午的成果就是这么一点点，技术渣真可怕~
@技术渣大吉利。
欢迎技术交流~
下次有了新的经验，再分享~~
以上网友发言只代表其个人观点，不代表新浪网的观点或立场。该问题的使用场景是：在微信平台素材上传的页面使用，在上传时需要发送一个参数，让后台判断是临时素材还是永久素材。 但是该组件在一开始就已经初始化(问题所在)了要发送的参数，也就是说没有办法后期追加额外的参数。
　　由于英文水平问题，阅读官方文档时没有找到该问题的解决方法，于是去github提了一个 ，得到的答案是仔细阅读文档，里面有一个回调函数可以解决问题?
　　关键的配置参数是
　　具体的代码如下：
//获得额外参数的方法
fodderType = function() {
return $(&#fodderTypeSelect&).val();
//初始化fileinput控件（第一次初始化）
function initFileInput(ctrlName, FileExtensions, fileSize) {
var control = $(&#39;#&#39; + ctrlName);
control.fileinput({
language: &#39;zh&#39;, //设置语言
uploadUrl: &/WxMedia/ImageUpload&, //上传的地址
allowedFileExtensions: FileExtensions, //接收的文件后缀
showUpload: true, //是否显示上传按钮
showCaption: true, //是否显示标题,
maxFileSize: fileSize * 1000, //单位为kb，如果为0表示不限制文件大小
browseClass: &btn btn-primary&, //按钮样式
previewFileIcon: &&i class=&#39;glyphicon glyphicon-king&#39;&&/i&&,
initialCaption: &请选择上传素材&,
uploadExtraData: function(previewId, index) {
//额外参数的关键点
var obj = {};
obj.fodder = fodderType();
console.log(obj);
　　可以看到配置文件中uploadExtraData的参数是一个函数形式，这是一个回调函数，会在上传时调用，读取配置的额外参数。
阅读(...) 评论()博客分类：
bootstrap上传插件fileinput功能非常强大,本文给出一例自动上传&上传成功回调的用例.
$("#update_csv").fileinput({
showUpload: false,
language:'zh',
uploadAsync:true,
dropZoneEnabled:false,
uploadUrl:'http://www.soyiyuan.com/',
maxFileCount: 1,
maxImageWidth: 600,
resizeImage: false,
showCaption: false,
showPreview: false,
browseClass: "btn btn-primary btn-lg",
allowedFileExtensions : ['csv', 'txt'],
previewFileIcon: ""
}).on("filebatchselected", function(event, files) {
$(this).fileinput("upload");
.on("fileuploaded", function(event, data) {
if(data.response)
alert('处理成功');
核心就是调用 filebatchselected 文件选择完成事件实现的,文件上传成功的事件是 fileuploaded .
注意插件版本是 version 4.2.7 .
化蝶自在飞
浏览: 1893171 次
来自: 武汉
啥原理……貌似很神奇啊
注意upload.js的配置参数 sendAsBinary
增加一个微信内置浏览器的useragent:
Mozilla/ ...
leiliang10 写道你揍是个骗纸此话怎讲?这个工具是我自 ...
你揍是个骗纸
(window.slotbydup=window.slotbydup || []).push({
id: '4773203',
container: s,
size: '200,200',
display: 'inlay-fix'}