前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了。前两天做一个excel导入的功能,前端使用原始的input type=‘file‘这种标签,效果不忍直视,于是博主下定决心要找一个好看的上传组件换掉它。既然bootstrap开源,那么社区肯定有很多关于它的组件,肯定也有这种常见的上传组件吧。经过一番查找,功夫不负有心人,还是被博主找到了这个组件:bootstrap fileinput。关于这个组件的简单...
bootstrap-fileinput文件如下:1.在项目中引用这三个文件,这里我是使用了BundleConfig,和你根据路径访问效果是一样的2.编写input元素 <input type="file" name="img" id="img" class="file-loading" multiple=""/>例如我这里, <div class="form-group"><div class="col-md-3"><div class="label-wrapper">@Html.LabelFor(model => model.ProductImgLink, new { @class = "control-label" })<div class="ico-help"><i class="fa ...
bootstrap上传文件控件初始化js://bootstrap上传文件控件
$(".fileupload").fileinput({language: "zh",showUpload: false,//uploadUrl: "/Product/imgDeal",autoReplace: true,maxFileCount: 1,//allowedFileExtensions: ["jpg", "png", "gif"],browseClass: "btn btn-primary", //按钮样式 previewFileIcon: "<i class=‘glyphicon glyphicon-king‘></i>",/* initialPreview: ["<img src=‘http://xxx/1.png‘ class=‘file-pr...
大家如果对Bootstrap-fileinput 的配置不清楚的话,大家可以查看官方网站:http://plugins.krajee.com/file-input。
逻辑说明:先从后台获取数据展示,然后进行编辑。
废话不多说, 直接上代码.
1. 页面部分代码:
<div class="form-group">
<label for="inputEmail3" class="col-xs-3 control-label">项目LOGO</label>
<div class="col-xs-7">
<input id="testlogo" type="file" name="icoFile" class="file-loading" />
<inp...
一、使用方法
1、导入依赖的js和css文件:
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/fileinput.min.css" />
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<script type="text/javascript" src="js/fileinput.js" ></script>
<script type="text/javascript" src="js/zh.js" ></script...
整合前的准备步骤
1.搭建好基础框架,本文用的是SSM(Spring+SpringMVC+Mybatis),这里的过程就不在本文中讲了,之前我做个一个demo(ssm整合+用户模块),可以参考这个搭建好。
2.下载bootstrap fileinput组件源码:
https://github.com/kartik-v/bootstrap-fileinput/
搭建后的效果图
图1.图2.图3.图4.图5.在需要编写的jsp页面引入组件
本工程的路径界面如下:在jsp引入组件需要的js,css,如下代码:
<!-- jq -->
<script type="text...
我的需求是这样的,有张个人资料的表单,表单中包含照片,姓名,性别,年龄等;照片需要提交到七牛里面保存,表单中照片上传使用bootstrap-fileinput插件;我的思路是用户填写表单中的文字信息后选择照片上传至七牛,上传成功后七牛会返回一个key也就是文件名称,然后再点击提交按钮将这个key和表单中其它已经填写的项一起保存至数据库中。
我的bootstrap-fileinput配置代码如下:我不知道token是不是应该放在这个位置,但是token是...
这篇文章主要介绍了基于bootstrap的上传插件fileinput 的ajax异步上传功能(支持多文件上传预览拖拽),非常不错,具有参考借鉴价值,对ajax上传感兴趣的朋友可以参考下基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)文章哦!首先需要导入一些js和css文件<link href="__PUBLIC__/CSS/bootstrap.css" rel="external nofollow" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="__PUBL...
经理让我帮服务器开发人员开发一个上传文件功能界面,我就想着以前使用过bootstrap-fileinput插件进行文件上传,很不错。赶紧就撸起来了。
1、下载压缩包。插件地址https://github.com/kartik-v/bootstrap-fileinput/ ,下载压缩包解压之后,拿出fileinput.min.js、fileinput.min.css、和中文需要引用的插件zh.js,因为这款插件默认的语言是英语。把这几个文件引入进页面
2、文件的引入顺序
引入bootstrap.min.css引入fileinput.mi...
在Bootstrap fileinput中移除预览文件时可以通过配置initialPreviewConfig: [ { url:deletefile,key:fileid } ] 来同步删除服务器上的文件和记录。但新上传的文件则需要其他方式来同步删除服务器记录。
在配置中遇到的一些问题,记录一下。fileinput在文件上传成功后会触发fileuploaded事件,移除图片后会触发filesuccessremove事件。
其中在fileuploaded中参数previewId是形如:preview-1538964832345-2这样的一串字符,而在files...
本实例所做功能为发送带附件邮件,可以上传多个附件,操作为选择一个附件以后自动上传,然后继续选择附件,填写完表单其他信息,点击保存发送带附件邮件。
HTML标签
<input id="fileUpload" type="file" name="file" data-show-preview="true" multiple/>js初始化,设置全局文件名参数
var fileName = [];
function initFileInput(id, url) {$("#" + id).fileinput({language: zh, uploadAsync:false,uploadUrl:url,browseClass: "...
效果图如下所示:
具体代码如下:
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" ><link rel="stylesheet" href="bootstrap-fileinput.css" rel="external nofollow" ><script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script><script src...
bootstrap 的上传文件控件号称最好用的,总之我用着到是挺别扭的。
首先这个控件很简单。
html代码
<form>
<input type="file" name="txt_file" id="txt_file" multiple class="file-loading" />
</form>可能需要保存按钮等等,这可以另外添加,指定事件方法就行,当然,需要在html中引入bootstrap的相关css和js
fileinput.js和fileinput.css
在你自己的js中,也就是保存按钮等的事件方法中需要写一段关键代码
$(#txt_file).filein...
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导入操作使用的是Uploadify插件,可以参考我随笔《附件上传组件uploadify的使用》,不过这个需要Flash控件支持,在某些浏览器(如Chro...
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 src="~/scripts/fileinput.js"></script>
<script src="~/scripts/zh.js"></script>2、html
<input type="file" id="uploaddoc" name="file" class="file" multiple />//上传按钮 multiple为可多文件上...