Bootstrap-fileinput控件的使用

本文档介绍了如何使用bootstrap-fileinput插件实现美观的文件上传功能,包括下载与引入插件、初始化设置、刷新参数以及添加事件处理,特别强调了文件上传后返回唯一标识的重要性,同时提及预览功能的限制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  最近由于公司需求,用到了bootstrap-fileinput插件上传文件,简单写个博客记个笔记。

 1、上传文件用的比较广泛,所以还是比较重要的。

       虽然可以在表单中使用<input type="file"/>来上传文件,但效果是比较简陋的,而且不支持预览,当然使用bootstrap-fileinput可以解决这个问题。

 2、使用步骤。

     2.1、由于bootstrap-fileinput是一个第三方插件,所以你需要下载它,下载地址,进去后点击Source进入GitHub下载即可。下载完后解压后如图所示:

     

   我们只需要css、img‘、js、themes文件夹即可,examples中有一个index.html,是一个demo网页。

  2.2、在页面引入插件的css、js‘文件。如下:

<link href="${base}/res/common/css/bootstrap.min.css" rel="stylesheet">
<link href="${base}/res/plugins/bootstrap-fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
<link href="${base}/res/plugins/bootstrap-fileinput/themes/explorer/theme.css" media="all" rel="stylesheet" type="text/css"/>
<script src="${base}/res/common/js/jquery-2.1.1.min.js"></script>
<script src="${base}/res/common/js/bootstrap.min.js"></script>
<script src="${base}/res/plugins/bootstrap-fileinput/js/plugins/sortable.js" type="text/javascript"></script>
<script src="${base}/res/plugins/bootstrap-fileinput/js/fileinput.js" type="text/javascript"></script>
<script src="${base}/res/plugins/bootstrap-fileinput/js/locales/fr.js" type="text/javascript"></script>
<script src="${base}/res/plugins/bootstrap-fileinput/js/locales/es.js" type="text/javascript"></script>
<script src="${base}/res/plugins/bootstrap-fileinput/themes/explorer/theme.js" type="text/javascript"></script>
由于这个控件依赖于bootstrap,所以我们需要引入bootstrap的js以及cs。 简短介绍看这儿,下载Bootstrap完成后如果单独拷贝Bootstrap的js、css文件,不要忘记拷贝fronts文件夹下的文件,否则页面将缺少一些字体,显得不美观。

2.3、初始化控件

<input type="file" class="file" id="test-upload" multiple/>
<script type="text/javascript">
	$("#test-upload").fileinput({
            uploadUrl: uploadFile, // 上传文件的路径
            uploadAsync: true     //是否异步上传
        });
</script>
完成了初始化,让我们看下界面吧。



初始化含有许多参数,先来看一下能在页面显示出效果的参数吧!如下图:


   再来看一下不会显示在页面的参数吧!

$("#file1").fileinput({
		theme:"fa",                                   //主题
		uploadUrl:"http://localhost:8080/uoloadFile", // 文件上传路径
		uploadExtraData: {name: 1},                   // 上传额外的数据,相当于多了一个name参数,值为1
		previewFileType: 'image',                     //预览的文件类型,支持video、pdf、img、txt等
		allowedPreviewTypes: undefined,               //允许预览的类型
		allowedPreviewMimeTypes: null,                //允许预览的MIME类型
		allowedFileTypes: null,                       //允许上传的文件类型
		allowedFileExtensions: null,                  //允许上传的文件拓展名,数组,如果设置为png,那么jpg就不能上传
		minFileSize: 0,                           	  //上传文件的最小size,如果为0,则不限制
		maxFileSize: 0,                               //上传文件的最大size
		maxFilePreviewSize: 25600, // 25 MB           //支持预览文件的最大size
		minFileCount: 0,                              //最小文件上传数量
		maxFileCount: 0,                              //最大文件上传数量
		uploadAync:true                               //是否异步上传
});
这儿要注意的是uoloadAync这个属性,如果为true,那么上传多个文件就是多个请求,为false则为1次请求,即上传3个文件会发三次请求,且这三次请求不能保证顺序,如果要求保证上传文件的顺序,要么设置为false,要么就采用其他方式保证顺序。

   初始化完成,如果需求有变化可能会改变上传文件的url或者改变一些其他的属性,那么这时候再来初始化就不起作用了,怎么办呢?

   可以使用这种方式 刷新一些参数 :$("#file1").fileinput("refresh",{showBrowse:false});

  

2.3、初始化完成,但我们的事情还没有完成,还需要为它添加一些事件。

     上传文件,一般都会和一个实体相联系起来,且文件不是在表单提交的时候上传,而是在表单提交前上传完毕。所以可以在文件上传完毕后返回文件实体的id等唯一性标识。

     例如下面的方式:

   

//文件上传成功后
$("#file1").on("fileuploaded",function(event, data, previewId, index) {
	//event当前事件,data则是数据,包括上传后服务器返回的数据+ 自身的一些数据
	//data.response才为服务器返回的数据,如果是data.filenames则为当前要上传的文件名(不包括上传的)
	//previewId 预览的下标,从0开始计算,注意并不是数字,而是一串字符串 + _index
	//index 下标,预览下标与index不一致,因为当你导入sortable.js可以排序就可能会不一致
				
});
//文件清空后
$('#fileupload1').on('filecleared', function(event) {
       $('#upload-files').val("");
});
			
//文件移除后
$('#fileupload1').on('filesuccessremove', function (event, id) {});
除了上面几个事件,你还可以添加其他事件,更多事件参考官方文档,虽然是英文,但不是太难, http://plugins.krajee.com/file-input#events

使用以上几点基本可以完成文件上传。但除了上传之后,还可能需要编辑时预览已经上传的文件,并对其作出排序、删除等操作。

2.4、初始化预览参数

$("#file1").fileinput({
	theme:"fa",                                   //主题
	uploadUrl:"http://localhost:8080/uoloadFile", // 文件上传路径
	uploadExtraData: {name: 1},                   // 上传额外的数据
	previewFileType: 'image',                     //预览的文件类型,支持video、pdf、img、txt等
	allowedFileTypes: null,                       //允许上传的文件类型
	allowedFileExtensions: null,                  //允许上传的文件拓展名,数组,如果设置为png,那么jpg就不能上传
	minFileSize: 0,                           	  //上传文件的最小size,如果为0,则不限制
	maxFileSize: 0,                               //上传文件的最大size
	maxFilePreviewSize: 25600, // 25 MB           //支持预览文件的最大size
	minFileCount: 0,                              //最小文件上传数量
	maxFileCount: 0,                              //最大文件上传数量
	uploadAync:true,                               //是否异步上传
	deleteUrl:"http://localhost:8080/deleteFile", //删除文件的链接
	overwriteInitial: false,                      //是否覆盖初始化的文件,默认为true,当要上传多个文件时建议改为false
	initialPreviewAsData: true,                   //初始化预览视图解析为数据
	initPreview:[],                                //初始化视图的链接,是一个数组
	initConfig:[{                                 //初始化时的一些配置,数组,与initPreviw长度对应
		width:'100px', //预览的高度
		url:"http://localhost:8080/deleteFile", //点击删除按钮时访问的链接
		key:1,//访问链接会带上的参数
		type:"image", //预览的文件类型,会覆盖上面的FileType
		caption:"预览标题",
		size:165,//显示预览文件的大小
		extra:{} //访问删除链接时除了key额外会带上的参数
	},{}]
});

注意:该插件初始化预览的功能有缺陷,尝试了多次,发现只能预览图片和pdf,如果预览其他类型文件成功的小伙伴记得评论下。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值