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');
}
});
相关推荐
在Bootstrap File Input中,主要涉及以下几个关键知识点: 1. **HTML5 File API**: 这是现代浏览器支持的原生API,允许用户通过`<input type="file">`标签选择本地文件,并进行读取、上传等操作。Bootstrap File ...
Bootstrap-File-Input插件则提供了丰富的自定义选项,如多文件选择、预览、进度条、拖放上传、文件类型限制等,使得文件上传功能变得更加友好和强大。 插件的主要特性包括: 1. **预览功能**:用户可以选择图片、...
在这个JavaScript代码中,我们为file input添加了事件监听,当用户选择文件之后,会触发事件处理函数,该函数会将文件路径设置到文本框中。如果浏览器不支持addEventListener或attachEvent方法,我们使用传统的...
<input type="file" id="customFile"> $('#customFile').filestyle({ buttonText: '选择文件', buttonName: 'btn-primary' }); ``` 4. **测试和调整**:在浏览器中预览效果,根据需求进行样式和功能的微调。 ...
Bootstrap File Input是一款强大的文件上传控件,专为Bootstrap框架设计,提供美观且功能丰富的文件选择、预览和上传功能。这个离线文档包含了该控件的详细信息,帮助开发者在没有网络连接的情况下也能深入理解和...
Bootstrap File Input是一款基于Bootstrap 3.x的增强型HTML5文件上传插件,它提供了一个高度可定制的文件选择器/上传控件,特别适合与Bootstrap CSS3样式一起使用。该插件通过提供对各种类型文件的预览功能(如图片...
这款插件,名为bootstrap-filestyle,是专门为Bootstrap框架设计的,目的是提升文件输入框的视觉效果和用户体验。它将普通的HTML文件上传控件转化为符合Bootstrap风格的元素,使得整个页面的设计保持一致性和美观性...
这里特别提及使用的前端技术为Bootstrap FileInput插件,该插件是一个功能丰富的前端文件上传控件,具有良好的用户交互和视觉效果。 首先,在Ubuntu系统上利用VSCode作为开发环境时,我们需要注意.NET Core应用程序...
"input file选择文件之后自动上传(样式自定义美化)"这个主题聚焦于一个常见但有时被忽视的用户体验改进点:如何在用户选择文件后立即启动上传,并且在上传过程中保持界面的美观与友好。下面将详细介绍这一过程涉及...
<input type="file" name="txt_file" id="txt_file" multiple class="file-loading" /> ``` 这里,`id`用于后续的JavaScript初始化,`multiple`属性允许用户选择多个文件,`class="file-loading"`是为了应用...
本篇文章将详细讲解如何将`<input type="file">` 控件的“浏览”按钮和提示改为英文。 首先,我们需要理解`<input type="file">`的基本结构和属性。这个标签创建了一个可以点击的区域,用户可以通过点击打开本地...
主要介绍了BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤,需要的朋友可以参考下
2. **表单元素**:Bootstrap文件上传通常会涉及到HTML表单元素,如`<input type="file">`,这是HTML中用于选择本地文件的元素。通过CSS和JavaScript,我们可以改变其外观和行为,如添加自定义的按钮样式或隐藏原始的...
在Bootstrap File Input中,"input"被扩展为一个专门处理文件上传的组件,它将传统的文件选择按钮与现代的文件管理功能相结合,提供了一种更优雅的用户界面。 在HTML5中,`<input type="file">`元素允许用户选择...
<input id="fileInput" type="file" class="file" data-preview-file-type="text"> ``` 2. **JavaScript配置**:在页面的JavaScript部分,使用jQuery来初始化BootstrapFileinput。这包括设置允许的文件类型、预览...
2. **HTML结构**:在页面中创建一个HTML表单,包含一个`<input type="file">`元素,用于用户选择要上传的图片。Bootstrap的样式可以用来美化这个元素。 3. **JavaScript配置**:利用jQuery和Bootstrap FileUploader...
var element = '<input id="test" name="insect_file" type="file" multiple class="file-loading" data-show-caption="true"/>'; $("#div_insect_file").append(element); // 将 input 插入到容器中 ``` 3. **...
<input id="fileInput" type="file" class="file" data-preview-file-type="text"> ``` ```javascript $("#fileInput").fileinput({ language: 'zh', // 设置为中文语言 uploadUrl: 'upload.php', // 设置上传URL...