最近由于公司需求,用到了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,如果预览其他类型文件成功的小伙伴记得评论下。