详解bootstrap-fileinput文件上传控件的亲身实践

2024-12-08 06:25:21

经理让我帮服务器开发人员开发一个上传文件功能界面，我就想着以前使用过bootstrap-fileinput插件进行文件上传，很不错。赶紧就撸起来了。

1、下载压缩包。插件地址https://github.com/kartik-v/bootstrap-fileinput/ ，下载压缩包解压之后，拿出fileinput.min.js、fileinput.min.css、和中文需要引用的插件zh.js，因为这款插件默认的语言是英语。把这几个文件引入进页面

2、文件的引入顺序

引入bootstrap.min.css
引入fileinput.min.css
引入jquery，版本最好2以上
引入bootstrap.min.js
引入fileinput.min.js
引入中文插件zh.js

3、使用

<div class="upload-wrap">
   <input type="file" id="md5File" multiple="multiple" name="test" />
</div>

将其设置为multiple，可以多选文件进行上传。

js文件操作

$('#md5File').fileinput({
    language: 'zh',
    uploadUrl: 'http://localhost:8080/sign',
    showCaption: true,//是否显示被选文件的简介
    showUpload: true,//是否显示上传按钮
    showRemove: true,//是否显示删除按钮
    showClose: true,//是否显示关闭按钮
    enctype: 'multipart/form-data',
    uploadAsync:false, //false 同步上传，后台用数组接收，true 异步上传，每次上传一个file,会调用多次接口
    layoutTemplates: {
      actionUpload: ''//就是让文件上传中的文件去除上传按钮
//      actionDelete: '',//去除删除按钮
    },
    browseClass: 'btn btn-primary',
    maxFileCount: 2,
    minFileCount : 2,
  }).on('filebatchuploadsuccess',function(res) {
    console.log(res);
  });

需求是让选择两个文件进行上传，而且只能发起一次请求，所以这里让maxFileCount和minFileCount都设置为2，uploadAsync设置为false，就是为了让两个文件同步上传，后台用数组一次接收。同步和异步上传成功结果处理的方法都是不同的

异步上传错误结果处理

$('#uploadfile').on('fileerror', function(event, data, msg) {

});

异步上传成功结果处理

$("#uploadfile").on("fileuploaded", function (event, data, previewId, index) {

})

同步上传错误结果处理

$('#uploadfile').on('filebatchuploaderror', function(event, data, msg) {

});

同步上传成功结果处理

$('#uploadfile').on('filebatchuploadsuccess', function(event, data, previewId, index) { 

});

其实本来不难，但是我对于同步上传成功结果处理的函数一直没有处理对，打断点也捕捉不到，我也很纳闷在做的时候，我在很多地方看到的是如下的处理方法：

我就一直使用$('#uploadfile').on('filepreupload',function(e,data,previewId,index){})这个方法，后来才恍然大悟，把filepreupload改成了filebatchuploadsuccess，最终才实现了同步上传成功结果处理。也算是一个小坑，被人误导，自己也没有看清楚。

这里面还有一个参数：layoutTemplates，这个参数是对上传的那多个文件里面操作

如上图的红色圈圈，可以对这几个icon进行设置

layoutTemplates: {
      actionUpload: ''//就是让文件上传中的文件去除上传按钮
//      actionDelete: '',//去除删除按钮
    },

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Bootstrap fileinput文件上传预览插件使用详解

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

bootstrap 的上传文件控件号称最好用的,总之我用着到是挺别扭的. 首先这个控件很简单. html代码 <form> <input type="file" name="txt_file" id="txt_file" multiple class="file-loading" /> </form> 可能需要保存按钮等等,这可以另外添加,指定事件方法就行,当然,需要在html中引入boot
Bootstrap文件上传组件之bootstrap fileinput

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

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

一.使用方法 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
最好用的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 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文件上传控件的亲身实践

经理让我帮服务器开发人员开发一个上传文件功能界面,我就想着以前使用过bootstrap-fileinput插件进行文件上传,很不错.赶紧就撸起来了. 1.下载压缩包.插件地址https://github.com/kartik-v/bootstrap-fileinput/ ,下载压缩包解压之后,拿出fileinput.min.js.fileinput.min.css.和中文需要引用的插件zh.js,因为这款插件默认的语言是英语.把这几个文件引入进页面 2.文件的引入顺序引入bootstrap.m
基于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组件的一些常见用法,特此分享到我们平台,供大家参考,同时也方便以后的查找.本文写的不好还请见谅. 一.效果展示 1.原始的input type='file',简直不忍直视. 2.不做任何装饰的bootstrap fileinput:(bootstrap fileinput初级进化) 3.bootstrap fileinput高级进化:中文化.可拖拽上传.文件扩展名校验(如果不是需要的文件,不让上传) 拖拽上传上传中 4.boot
AngularJS 文件上传控件 ng-file-upload详解

网上可以找到的 AngularJS 的文件上传控件有两个: angular-file-upload:https://github.com/nervgh/angular-file-upload ng-file-upload:https://github.com/danialfarid/ng-file-upload 这两个非常类似,连js文件的结构都是一样的.核心的js是.min.js,还都有一个-shim.min.js,用来支持上传进度条和上传暂停等高级功能. 按道理讲shim.js应该是可加可不
jQuery文件上传控件 Uploadify 详解

基于jquery的文件上传控件,支持ajax无刷新上传,多个文件同时上传,上传进行进度显示,删除已上传文件. 要求使用jquery1.4或以上版本,flash player 9.0.24以上. 有两个版本,一个用flash,一个是html5.html5的需要付费~所以这里只说flash版本的用法. 官网:http://www.uploadify.com/ 控件截图: 用法: 首先引用下面的文件 <link rel="stylesheet" type="text/css&
学习使用AngularJS文件上传控件

前段时间做项目遇到一个需求是上传文件,大概需要实现的样式是这样子的,见下图: 需要同时上传两个文件.并且规定文件格式和文件大小.因为前端框架使用angular,且不想因为一个上传功能又引入一个jquery,所以在网上查找基于angular的上传控件,因为angular还算比较新,貌似都没有太成熟的插件,网上的教程也大多是复制粘贴,总之没起倒多大的作用...但是皇天不负有心人,最后还是让我遇到了这个功能强大的插件,让我有种相见恨晚的感觉呀,依靠官方文档和师兄的帮助,终于搞清楚了基本的使用方法.好东
ASP.NET文件上传控件Uploadify的使用方法

对于文件上传来说,有很多种实现方式,如传统的表单方式,现在流行的flash方式,甚至还有纯JS方式,之所以有这些方式来实现文件上传,我想主要原因是因为,传统的上传对于大文件支持不够,因为它是单线程同步机制,当大文件通过HTTP方式发送到服务端时,对于服务端站点的主线程影响比较大,会产生阻塞,所以,现在很多上传控制都是异步,多线程的方式去实现的. 今天来介绍一个文件上传控制,它就是Uploadify,它应该是flash的异步上传工具,对于大文件支持还不错,所以,我选择了它. 相关API介绍 upl
javascript实现校验文件上传控件实例

本文实例讲述了javascript实现校验文件上传控件.分享给大家供大家参考.具体如下: 该javascript校验文件上传控件代码可检测上传文件的类型是否是图片 <script language="javascript"> function Checkfiles() { var fup = document.getElementById('logo1'); var fileName = fup.value; var ext = fileName.substring(fil
asp.net 大文件上传控件

大文件上传控件(包含进度条) 使用说明如下: <summary> 上传进度条控件 </summary> <example> Web.config 配置 <?xml version="1.0"?> <configuration> <configSections>  <sectionGroup name="slickUpload"> <sectio

详解bootstrap-fileinput文件上传控件的亲身实践

相关推荐

随机推荐