var $el = $('#mortgageFile'), initPlugin = function() {
$el.fileinput({
language:'zh', //设置语言 类型3
uploadUrl:employeeType.requestUrl.mortgageFile, //上传的地址
uploadExtraData:{kvId: '3'},
overwriteInitial:true,//是否覆盖上一个
//allowedFileExtensions: ["txt", "md", "ini", "text"],//自定义上传文件
browseLabel: '点击浏览',//浏览按钮自定义蚊子
elErrorContainer: "#errorBlock",//如果类型错误提示
minImageWidth:50,//设置图片的宽
minImageHeight:50,//设置图片的高
autoReplace:true,//自动替换和maxFileCount一起用,现在是到5个自动替换
showUpload:false, // hide upload button
showRemove:false, // hide remove button
maxFileCount: 5,
dropZoneEnabled:true
}).on('fileuploaded', function(event, data,previewId, index) {
var form = data.form, files = data.files, extra = data.extra,
response = data.response, reader = data.reader;
var mortgageIds = $("#mortgage-tab #mortgageIds").val();
if(mortgageIds!=""){
$("#mortgage-tab #mortgageIds").val(response.id+","+mortgageIds);
}else{
$("#mortgage-tab #mortgageIds").val(response.id);
}
});
};
//删除方法
$("#input-707").on("filepredelete", function(jqXHR) {
var abort = true;
if (confirm("Are you sure you want to delete this image?")) {
abort = false;
}
return abort; // you can also send any data/object that you can receive on `filecustomerror` event
});
// `disable` and `enable` methods
$(".btn-disable").on('click', function() {
var $btn = $(this);
if (!$el.data('fileinput')) {
initPlugin();
$el.trigger('change');
}
if ($el.attr('disabled')) {
$el.fileinput('enable');
$btn.html('Disable').removeClass('btn-primary').addClass('btn-default');
} else {
$el.fileinput('disable');
$btn.html('Enable').removeClass('btn-default').addClass('btn-primary');
}
});
// `destroy` method
$(".btn-destroy").on('click', function() {
if ($el.data('fileinput')) {
$el.fileinput('clear');
}
});
相关推荐
css以及js
方便快捷的上传文件插件!
Bootstrap File Input 文件上传控件离线文档,完美结合bootstrap,支持ajax异步回调。
文件上传插件Bootstrap File Input 的参考手册
件上传input在各个浏览器里表现形式都不一样,这里通过css样式控制,尽量在多浏览器中的表现都一样
介绍 通过本文,你可以学习到如何封装或者开发一个前端组件,同时学习Bootstrap-fileinput组件的使用,封装后使用...关于Bootstrap-fileinput的API文档可参考http://plugins.krajee.com/file-input 本文源码已在Admin
本篇内容主要解决.net core中文件上传的问题 开发环境:ubuntu+vscode.本文给大家介绍的非常详细,感兴趣的朋友一起看看吧
本篇介绍如何使用bootstrap fileinput.js,file input插件功能如此强大,样式非常美观,并且支持上传文件预览,ajax同步或异步上传,拖曳文件上传等炫酷的功能,最好用的文件上传组件。 文件夹结构 版本都是3.x &...
主要介绍了BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤,需要的朋友可以参考下
可在任何地方使用很小,只有2kb或更少(如果您将其压缩)目录安装与npm npm install bs-custom-file-input --saveCDN CDN 链接jsDelivr jsDelivr,缩小如何使用它您应该等待文档就绪事件,然后调用init方法使您的...
最近在写自己的个人网站 ,前端使用的bootstrap框架 ,做到上传图片功能的时候网上找到一个基于bootstrap的图片上传框架 file-input 插件, 这个插件做的非常符合我的审美观,所以简单记录一下这个插件的使用方法 ...
bootstrap-fileinput 使用例子,包含一些关键词的解释
input type="file">元素,它的默认样式: chrome下: IE下: 不管是上面哪种,样式都比较简单,和很多网页的风格都不太协调。 根据用户的需求,设计风格,改变其显示样式的场合就比较多了。 如果,要像下面一样...
上传文件时,选择了文件后想清空文件路径,经搜索发现个不错的方法在此与大家分享下,感兴趣的朋友不要错过
前面开发一个系统用了这个插件, 因为属于本地化运行, 无法引用在线css文件, 导致所使用的字体图标也无法正常,所以看了源码找了在线字体, 专门下载归类, 现在分享给大家, 希望可以帮助到各位小伙伴, 费了点...
.Net(Core)框架通过BootstrapFileinput组件展示文件上传
在对象容器边界内,在对象的背景和内容之间显示一张图片。并提供对此图片的剪切和改变尺寸的操作。如果载入的是PNG(Portable Network Graphics)格式,则0%-100%的透明度也被提供。
Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadify 好看一些,功能也强大些...