bootstrap fileinput完整实例分享
本篇介绍如何使用bootstrap fileinput.js，file input插件功能如此强大，样式非常美观，并且支持上传文件预览，ajax同步或异步上传，拖曳文件上传等炫酷的功能，最好用的文件上传组件。
文件夹结构
版本都是3.x
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link href="bootstrap-3.3.5/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap-fileinput-master/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="jquery-2.1.1.min.js"></script>x
<script src="bootstrap-fileinput-master/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script>
<script src="bootstrap-fileinput-master/js/fileinput.min.js"></script>
<script src="bootstrap-3.3.5/dist/js/bootstrap.min.js" type="text/javascript"></script>
<script src="bootstrap-fileinput-master/js/fileinput_locale_zh.js"></script>
</head>
<body>
<form>
<div class="" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">请选择Excel文件</h4>
</div>
<div class="modal-body">
<a href="~/Data/ExcelTemplate/Order.xlsx" class="form-control" style="border:none;">下载导入模板</a>
<input type="file" name="txt_file" id="txt_file" multiple class="file-loading" />
</div></div>
</div>
</div>
</form>
</body>
</html>
<script>
$(function () {
//0.初始化fileinput
var oFileInput = new FileInput();
oFileInput.Init("txt_file", "/api/OrderApi/ImportOrder");
});
//初始化fileinput
var FileInput = function () {
var oFile = new Object();
//初始化fileinput控件（第一次初始化）
oFile.Init = function(ctrlName, uploadUrl) {
var control = $('#' + ctrlName);
//初始化上传控件的样式
control.fileinput({
language: 'zh', //设置语言
uploadUrl: uploadUrl, //上传的地址
allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
showUpload: 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}！",
});
//导入文件上传完成之后的事件
$("#txt_file").on("fileuploaded", function (event, data, previewId, index) {
$("#myModal").modal("hide");
var data = data.response.lstOrderImport;
if (data == undefined) {
toastr.error('文件格式类型不正确');
return;
}
//1.初始化表格
var oTable = new TableInit();
oTable.Init(data);
$("#div_startimport").show();
});
}
return oFile;
};
</script>
知识只有共享才能传播，才能推崇出新的知识，才能学到更多，这里写的每一篇文字/博客，基本都是从网上查询了一下资料然后记录下来，也有些是原滋原味搬了过来，也有时加了一些自己的想法，希望大家喜欢。
如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：Bootstrap学习教程
Bootstrap实战教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Bootstrap的fileinput插件实现多文件上传的方法
*1.bootstrap-fileinput 插件git下载地址 https://github.com/kartik-v/bootstrap-fileinput.git 2.解决使用bootstrap-fileinput得到返回值 上传图片 $("#file-0a").fileinput({ uploadUrl : "/upload_img",//上传图片的url allowedFileExtensions : [ 'jpg', 'png', 'gif' ], ov
-
JS文件上传神器bootstrap fileinput详解
Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一段调用方发和servlet端的接收代码,未完待续. 引言: 一个强化的HTML5 文件输入插件,适用于Bootstrap 3.x.本插件对多种类型的文件提供文件预览,并且提供了多选等功能.本插件还提供给你一个简单的方式去安装一个先进的文件选择/上传控制版本去配合Bootstrap CSS3样式.通过
-
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput bootstrap-fileinput在线API:http://plugins.krajee.com/file-input bootstrap-fileinput Demo展示:http://plugins.krajee.com/file-basic-usage-demo 这个插件主要是介绍如何处理图片上传的处理操作,原先我的Excel导入操作使用的是Upl
-
Bootstrap中的fileinput 多图片上传及编辑功能
大家如果对Bootstrap-fileinput 的配置不清楚的话,大家可以查看官方网站:http://plugins.krajee.com/file-input. 逻辑说明:先从后台获取数据展示,然后进行编辑. 废话不多说, 直接上代码. 1. 页面部分代码: <div class="form-group"> <label for="inputEmail3" class="col-xs-3 control-label">
-
值得学习的bootstrap fileinput文件上传工具
这是我上传的第二个plugin,首先第一点就是因为这个好看,符合bootstrap的界面风格,第二是可以拖拽(虽然我不常用这个功能 但是这样界面看起来就丰满了很多) 最后不得不吐槽这个的回发事件 我百度了很久才找到,CSDN上面也问了,不知道是自己百度的方式不正确还是别的什么原因..好吧 地址 http://plugins.krajee.com/file-input https://github.com/kartik-v/bootstrap-fileinput 效果图 这里以我一个项目的新建产品
-
bootstrap table动态加载数据示例代码
我最近在研究bootstrap的学习路上,那么今天也算个学习笔记吧! 效果如下: 点击选择按钮,弹出模态框,加载出关键词列表 TABLE样式: <div class="modal fade " id="ClickModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" &
-
Bootstrap Fileinput文件上传组件用法详解
最近时间空余,总结了一些关于bootstrap fileinput组件的一些常见用法,特此分享到我们平台,供大家参考,同时也方便以后的查找.本文写的不好还请见谅. 一.效果展示 1.原始的input type='file',简直不忍直视. 2.不做任何装饰的bootstrap fileinput:(bootstrap fileinput初级进化) 3.bootstrap fileinput高级进化:中文化.可拖拽上传.文件扩展名校验(如果不是需要的文件,不让上传) 拖拽上传 上传中 4.boot
-
bootstrapfileinput实现文件自动上传
bootstrap fileinput文件上传插件功能如此强大,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,完全没有理由不去使用, JS引用: <script type="text/javascript" src="~/bootstrap/js/fileinput.min.js"></script> <link href="~/bootstrap/css/fileinput.min.c
-
bootstrap fileinput完整实例分享
本篇介绍如何使用bootstrap fileinput.js,file input插件功能如此强大,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,最好用的文件上传组件. 文件夹结构 版本都是3.x <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <htm
-
Spring集成MyBatis完整实例(分享)
为了梳理前面学习的<Spring整合MyBatis(Maven+MySQL)一>与<Spring整合MyBatis(Maven+MySQL)二>中的内容,准备做一个完整的示例完成一个简单的图书管理功能,主要使用到的技术包含Spring.MyBatis.Maven与MySQL等.最后的运行效果如下: 项目结构如下: 一.新建一个基于Maven的Web项目 1.1.创建一个简单的Maven项目,项目信息如下: 1.2.修改层面信息,在项目上右键选择属性,再选择"Project
-
限时抢购-倒计时的完整实例(分享)
如下所示: <!DOCTYPE HTML> <html> <head> <meta charset=utf-8"/> <title>团购--限时抢</title> </head> <body> <div> <div class="time">还剩 <span id="LeftTime"></span></di
-
JS组件Bootstrap Table使用实例分享
学习使用bootstrap表格是对客户端进行分页的时候,在朋友的帮助下,找到了文档http://bootstrap-table.wenzhixin.net.cn/examples/ 找到了传到后台的每页条数Limit,和记录开始数Offset. 开始封装,分享一下我的代码,从bootstrap table 获取页码和页数,并交给后台处理. $('#table').bootstrapTable({ url: '<%=path%>/Fee
-
BootStrap Fileinput上传插件使用实例代码
0.效果图 1.引入js.css(建议css放在html头部,js加载在html底部) <link href="~/Content/fileinput.min.css" rel="external nofollow" rel="stylesheet" /> <script src="~/scripts/jquery-1.10.2.min.js"></script> <script sr
-
BootStrap fileinput.js文件上传组件实例代码
1.首先我们下载好fileinput插件引入插件 <span style="font-size:14px;"><link type="text/css" rel="stylesheet" href="fileinput/css/fileinput.css" rel="external nofollow" /> <script type="text/javascript
-
基于bootstrap的文件上传控件bootstrap fileinput
本文实例为大家分享了文件上传控件bootstrap fileinput的使用方法,供大家参考,具体内容如下 github地址:https://github.com/kartik-v/bootstrap-fileinput 官网:http://plugins.krajee.com/file-input 1.下载压缩文件. 2.导入文件 bootstrap-fileinput/css/fileinput.min.css bootstrap-fileinput/js/fileinput.min.js
-
Bootstrap FileInput实现图片上传功能
本文实例为大家分享了Bootstrap FileInput实现图片上传功能的具体代码,供大家参考,具体内容如下 html代码: <div class="form-group"> <label class="col-sm-2 control-label">图片</label> <div class="col-sm-8"> <input id="filesInput" type
-
JavaScript实现简洁的俄罗斯方块完整实例
本文实例讲述了JavaScript实现简洁的俄罗斯方块.分享给大家供大家参考,具体如下: 先来看看运行效果图: 完整实例代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>俄罗斯方块</title> <style ty
-
jQuery实现导航滚动到指定内容效果完整实例【附demo源码下载】
本文实例讲述了jQuery实现导航滚动到指定内容效果.分享给大家供大家参考,具体如下: 做页面制作也有两年了,其中也做过许多页面效果,有简单的,也有复杂的,今天就来分享一个导航滚动到内容的特效. 平时我们做导航滚动到内容都是通过锚点来做,刷的一下就直接跳到内容了,没有一丝的滚动效果,而且 url 链接最后会有"小尾巴",今天我就介绍一款 jquery 做的滚动的特效,既可以设置滚动速度,又可以在 url 链接上没有"小尾巴". html: <!DOCTYPE