`

bootstrap input file

 
阅读更多

 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

    在Bootstrap File Input中,主要涉及以下几个关键知识点: 1. **HTML5 File API**: 这是现代浏览器支持的原生API,允许用户通过`<input type="file">`标签选择本地文件,并进行读取、上传等操作。Bootstrap File ...

    bootstrap-file-input

    Bootstrap-File-Input插件则提供了丰富的自定义选项,如多文件选择、预览、进度条、拖放上传、文件类型限制等,使得文件上传功能变得更加友好和强大。 插件的主要特性包括: 1. **预览功能**:用户可以选择图片、...

    文件上传input file简便美化方案(css)

    在这个JavaScript代码中,我们为file input添加了事件监听,当用户选择文件之后,会触发事件处理函数,该函数会将文件路径设置到文本框中。如果浏览器不支持addEventListener或attachEvent方法,我们使用传统的...

    前端项目-bootstrap-filestyle.zip

    <input type="file" id="customFile"> $('#customFile').filestyle({ buttonText: '选择文件', buttonName: 'btn-primary' }); ``` 4. **测试和调整**:在浏览器中预览效果,根据需求进行样式和功能的微调。 ...

    Bootstrap File Input 控件离线文档

    Bootstrap File Input是一款强大的文件上传控件,专为Bootstrap框架设计,提供美观且功能丰富的文件选择、预览和上传功能。这个离线文档包含了该控件的详细信息,帮助开发者在没有网络连接的情况下也能深入理解和...

    Bootstrap File Input 参考手册

    Bootstrap File Input是一款基于Bootstrap 3.x的增强型HTML5文件上传插件,它提供了一个高度可定制的文件选择器/上传控件,特别适合与Bootstrap CSS3样式一起使用。该插件通过提供对各种类型文件的预览功能(如图片...

    Bootstrap样式文件上传jquery插件

    这款插件,名为bootstrap-filestyle,是专门为Bootstrap框架设计的,目的是提升文件输入框的视觉效果和用户体验。它将普通的HTML文件上传控件转化为符合Bootstrap风格的元素,使得整个页面的设计保持一致性和美观性...

    .net core版 文件上传/ 支持批量上传拖拽及预览功能(bootstrap fileinput上传文件)

    这里特别提及使用的前端技术为Bootstrap FileInput插件,该插件是一个功能丰富的前端文件上传控件,具有良好的用户交互和视觉效果。 首先,在Ubuntu系统上利用VSCode作为开发环境时,我们需要注意.NET Core应用程序...

    input file选择文件之后自动上传(样式自定义美化)

    "input file选择文件之后自动上传(样式自定义美化)"这个主题聚焦于一个常见但有时被忽视的用户体验改进点:如何在用户选择文件后立即启动上传,并且在上传过程中保持界面的美观与友好。下面将详细介绍这一过程涉及...

    bootstrap fileinput完整实例分享

    <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">` 控件的“浏览”按钮和提示改为英文。 首先,我们需要理解`<input type="file">`的基本结构和属性。这个标签创建了一个可以点击的区域,用户可以通过点击打开本地...

    BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤

    主要介绍了BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤,需要的朋友可以参考下

    BootStrap file upload demo

    2. **表单元素**:Bootstrap文件上传通常会涉及到HTML表单元素,如`<input type="file">`,这是HTML中用于选择本地文件的元素。通过CSS和JavaScript,我们可以改变其外观和行为,如添加自定义的按钮样式或隐藏原始的...

    bootstrapfileinput.zip

    在Bootstrap File Input中,"input"被扩展为一个专门处理文件上传的组件,它将传统的文件选择按钮与现代的文件管理功能相结合,提供了一种更优雅的用户界面。 在HTML5中,`<input type="file">`元素允许用户选择...

    22-06-23-051_BootstrapFileinput(文件上传深入理解示例)

    <input id="fileInput" type="file" class="file" data-preview-file-type="text"> ``` 2. **JavaScript配置**:在页面的JavaScript部分,使用jQuery来初始化BootstrapFileinput。这包括设置允许的文件类型、预览...

    asp.net与Bootstrap fileuploader结合的图片上传下载

    2. **HTML结构**:在页面中创建一个HTML表单,包含一个`<input type="file">`元素,用于用户选择要上传的图片。Bootstrap的样式可以用来美化这个元素。 3. **JavaScript配置**:利用jQuery和Bootstrap FileUploader...

    bootstrap-fileinput使用例子

    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. **...

    bootstrap-fileinput-master上传插件(中文版)

    <input id="fileInput" type="file" class="file" data-preview-file-type="text"> ``` ```javascript $("#fileInput").fileinput({ language: 'zh', // 设置为中文语言 uploadUrl: 'upload.php', // 设置上传URL...

Global site tag (gtag.js) - Google Analytics