前言：之前的三篇介绍了下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为可多文件上...