1.准备:
插件下载地址:https://github.com/kartik-v/bootstrap-fileinput
文件的引入:
js:插件核心js代码,引用fileinput.min.js/fileinput.js即可,默认插件语言为英文,如需要中文需要引用js/locales/zh.js(其他语言引用相应的js文件)
js/plugins:相关辅助插件,piexif.min.js(resize image插件)、sortable.js(初始化预览窗口缩略图排序插件)、purify.js(看说明是净化html代码用的,试了下没有搞明白具体有说明作用)
css:插件核心css代码,fileinput.min.css/fileinput.css(核心css代码,引用任何一个)、fileinput-rtl.min.css/fileinput-rtl.css(选用这组css,文件选择框会和从右向左排列,即选择文件等相关按钮按钮在左边,文件框在右边)
themes:主题,如需要插件主题样式可引用主题文件夹下的相应js和css文件
2.代码:
1.文件的引入
<link rel="stylesheet" href="<%=path%>/css/bootstrap.min.css" />
<link rel="stylesheet" href="<%=path%>/css/fileinput.css" />
<script type="text/javascript" src="<%=path%>/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<%=path%>/js/fileinput.js"></script>
<script type="text/javascript" src="<%=path%>/js/zh.js"></script>
2.html代码:
<div class="form-group">
<label for="import_file" class="control-label col-sm-2">附件:</label>
<div class="col-sm-10">
<input type="file" name="files" class="file-loading" id="import_file" multiple/>
</div>
</div>
3.js代码:
$(function(){
var fileInput = new FileInput();
fileInput.Init("import_file", '上传的url');
});
//初始化fileinput
var FileInput = function () {
var oFile = new Object();
//初始化fileinput控件(第一次初始化)
oFile.Init = function (ctrlName, uploadUrl) {
var control = $('#' + ctrlName);
//初始化上传控件的样式
control.fileinput({
language: 'zh', //设置语言
uploadUrl: uploadUrl, //上传的地址
uploadAsync: false,
allowedFileExtensions: null,//接收的文件后缀
showUpload: false, //是否显示上传按钮
showCaption: false,//是否显示标题
browseClass: "btn btn-primary", //按钮样式
dropZoneEnabled: false,//是否显示拖拽区域
maxFileSize: 0,//单位为kb,如果为0表示不限制文件大小
// maxFileCount: 10, //表示允许同时上传的最大文件个数
enctype: 'multipart/form-data',
validateInitialCount: true,
previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
showPreview: true,//是否显示预览区域
previewSettings: {
image: {width: "100px", height: "100px"},
},//预览区域图片统一大小
allowedPreviewTypes: ['image'],//
layoutTemplates: {
actionUpload: '',//清除预览区域上传按钮
actionZoom: '',//清除预览区域预览按钮
// actionDelete: ''//清除预览区域删除按钮
},
showClose: false,//是否显示关闭按钮
uploadExtraData: function () { //额外参数的关键点
var obj = {};
obj.id = $('#odiId').val();
obj.fileType = "";
obj.tableName = "T_ONLINE_DEVICE_INFO";
obj.fileDesprition = "监控档案-在线监测设备备案";
return obj;
}
}).on("filebatchuploadsuccess", function () {
$('#import_file').fileinput('refresh');
$('#import_file').fileinput('disable').fileinput('enable');
Feng.success("上传成功");
}).on('filebatchuploaderror', function() {
$('#import_file').fileinput('refresh');
$('#import_file').fileinput('disable').fileinput('enable');
Feng.error("上传失败");
online.refreshTable();
online.close();
});
$("#import_file").on("filebatchselected", function(event, files) {
$("#textTitle").val();
if (files != null && files.length > 0 && $("#textTitle").val()=="") {
var file = files[0];
$("#textTitle").val(file.name);
}
});
};
return oFile;
};