bootstrap fileinput实现文件上传功能

2024-03-30 08:47:03

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').fileinput('upload');

这就是上传的代码。

除了以上这些，还需要一段重要的代码，这个初始化上传控件用的，也就是设置一些必要的参数

function initFileInput(ctrlName, uploadUrl) {
  var control = $('#' + ctrlName);
  control.fileinput({
   language: 'zh', //设置语言
   uploadUrl: uploadUrl, //上传的地址
   allowedFileExtensions : ['txt', 'doc','docx'],//接收的文件后缀
   showUpload: false, //是否显示上传按钮
   showCaption: false,//是否显示标题
   enctype: 'multipart/form-data',
   browseClass: "btn btn-primary", //按钮样式
   previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
   uploadExtraData: function() { //额外参数的关键点
     return data;
    }
   }).on("fileuploaded", function (event, data, previewId, index) {
    fileResponseData.push(data.response.Attach);
   });
 }

 //-----入口方法-----
 $(function() {
  initFileInput("txt_file", "/updateFile.do");
 });

设置这些后，bootstrap就可以自动上传文件，具体上传的规则，是由项目的controller控制的。

关于回调函数，就是 on("dileuploaded",func......)，这是附件上传成功后就会调用一次，也有刚选择附件时的回调函数，关键字是filebatchselected。

关键说一下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
值得学习的bootstrap fileinput文件上传工具

这是我上传的第二个plugin,首先第一点就是因为这个好看,符合bootstrap的界面风格,第二是可以拖拽(虽然我不常用这个功能但是这样界面看起来就丰满了很多) 最后不得不吐槽这个的回发事件我百度了很久才找到,CSDN上面也问了,不知道是自己百度的方式不正确还是别的什么原因..好吧地址 http://plugins.krajee.com/file-input https://github.com/kartik-v/bootstrap-fileinput 效果图这里以我一个项目的新建产品
Bootstrap Fileinput文件上传组件用法详解

最近时间空余,总结了一些关于bootstrap fileinput组件的一些常见用法,特此分享到我们平台,供大家参考,同时也方便以后的查找.本文写的不好还请见谅. 一.效果展示 1.原始的input type='file',简直不忍直视. 2.不做任何装饰的bootstrap fileinput:(bootstrap fileinput初级进化) 3.bootstrap fileinput高级进化:中文化.可拖拽上传.文件扩展名校验(如果不是需要的文件,不让上传) 拖拽上传上传中 4.boot
Bootstrap fileinput文件上传预览插件使用详解

介绍通过本文,你可以学习到如何封装或者开发一个前端组件,同时学习Bootstrap-fileinput组件的使用,封装后使用更加简单方便. BaseFile是AdminEAP框架中基于Bootstrap-fileinput的附件上传组件,它支持支持多文件.在线预览.拖拽上传等功能,封装后BaseFile主要包括以下功能: 弹出窗口的附件上传当前界面的附件上传显示附件明细可编辑的附件明细(删除.预览.不可新增) 关于Bootstrap-fileinput的API文档可参考http://p
基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

首先需要导入一些js和css文件 <link href="__PUBLIC__/CSS/bootstrap.css" rel="external nofollow" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="__PUBLIC__/CSS/fileinput.css" rel="
JS文件上传神器bootstrap fileinput详解

Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一段调用方发和servlet端的接收代码,未完待续. 引言: 一个强化的HTML5 文件输入插件,适用于Bootstrap 3.x.本插件对多种类型的文件提供文件预览,并且提供了多选等功能.本插件还提供给你一个简单的方式去安装一个先进的文件选择/上传控制版本去配合Bootstrap CSS3样式.通过
Bootstrap文件上传组件之bootstrap fileinput

前言:之前的三篇介绍了下bootstrap的一些常用组件,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签,效果不忍直视,于是博主下定决心要找一个好看的上传组件换掉它.既然bootstrap开源,那么社区肯定有很多关于它的组件,肯定也有这种常见的上传组件吧.经过一番查找,功夫不负有心人,还是被博主找到了这个组件:bootstrap fileinput.在此记录下,就算做个学习笔记,也给需要使用的朋友提供点方便. Bo
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 fileinput.js文件上传组件

本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo 二.插件引入 <link type="text/css" rel="stylesheet" href="${ctx}/components/fileinput/css/fileinput.css" /> <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实现文件上传功能

相关推荐

随机推荐