zoukankan      html  css  js  c++  java
  • 上传文件插件-bootstrap-fileinput

    1. js文件:

        <link href="/bootstrap/css/fileinput.css" media="all" rel="stylesheet" type="text/css"/>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
              media="all" rel="stylesheet" type="text/css"/>
        <link href="/bootstrap/themes/explorer-fa/theme.css" media="all" rel="stylesheet" type="text/css"/>
    
        <script src="/js/bootstrap/jquery-2.1.4.min.js"></script>
    
        <!--<script src="/bootstrap/js/locales/fr.js" type="text/javascript"></script>-->
        <!--<script src="/bootstrap/js/locales/es.js" type="text/javascript"></script>-->
    
        <script src="/bootstrap/js/fileinput.js" type="text/javascript"></script>
        <script src="/bootstrap/themes/fa/theme.js" type="text/javascript"></script>

    2. demo

    <!--修改头像-->
    <div id="updateImgDialog">
        <form enctype="multipart/form-data" method="post" action="/user/uploadHeadImg">
            <div class="form-group">
                <div class="file-loading">
                    <input id="file-4" name="img" type="file" class="file">
                    <p class="help-block">支持jpg、jpeg、png、gif格式,大小不超过2.0M</p>
                </div>
            </div>
        </form>
    </div>
    
    <script>
        $("#file-4").fileinput({
            theme: "explorer", //主题
            language: 'zh',
            uploadUrl: "/user/uploadHeadImg",// 上传请求路径
            allowedFileExtensions: ['jpg', 'gif', 'png', 'jpeg', 'pdf'],//允许上传的文件后缀
            uploadAsync: false, //是否允许异步上传
            showUpload: false,//是否显示上传按钮
            showCaption: false,//是否显示容器dropZoneEnabled: false,//是否显示拖拽区域
            removeFromPreviewOnError: true,//是否移除校验文件失败的文件
            uploadExtraData: function (previewId, index) {   //额外参数 返回json数组
                return {
                    'id': 1  // <span style="font-family:Arial, Helvetica, sans-serif;">commId 为全局变量,可以给控件上传额外参数  </span>
    
                };
            },
            layoutTemplates: {    //取消上传按钮
                actionUpload: '',
            },
            showPreview: true,      //显示预览
            minFileCount: 1,   //最低文件数量
            maxFileCount: 1,   //最多文件数量
            maxFileSize: 512,  //允许文件上传大小
            overwriteInitial: true,
            previewFileIcon: '<i class="fa fa-file"></i>',
            initialPreviewAsData: true, // defaults markup
            preferIconicPreview: false, // 是否优先显示图标  false 即优先显示图片
            previewFileIconSettings: { // configure your icon file extensions
                'pdf': '<i class="fa fa-file-pdf-o text-danger"></i>',
                'jpg': '<i class="fa fa-file-photo-o text-danger"></i>',
                'gif': '<i class="fa fa-file-photo-o text-muted"></i>',
                'png': '<i class="fa fa-file-photo-o text-primary"></i>',
                'jpeg': '<i class="fa fa-file-photo-o text-primary"></i>'
            },
        });
        $("#file-4").fileinput();
        $("#file-4").on("filebatchuploadsuccess", function (event, data, previewId, index) {
            if (data.response == true) {
                alert("上传成功")
                imgDialog.close()
            }
            var result = data.response.result;//接收后台返回的数据
    //            console.log(data)
    //            console.log(previewId)
    //            console.log(index)
    //            $.each(result, function (i, item)  //each函数会遍历从后台返回的错误信息
    //            {
    //                if (item.error != null) { abp.message.warn(item.error); return; }
    //            });
    //            $("#input-ke-2").fileinput('reset'); //重置上传控件(清空已文件)
    //            abp.notify.info("提交成功");
        });
    </script>
  • 相关阅读:
    尚硅谷《全套Java、Android、HTML5前端视频》
    OCM 学习练习题目
    本文转自 MyEclipse 2015反编译插件安装
    关闭VirtualBox虚拟机的时钟同步
    Oracle数据库的状态查询
    ORA-00845 MEMORY_TARGET not supported on this system 的解决
    Ehcache
    Oracle 列转行函数 Listagg()
    oracle数据库定时任务dbms_job的用法详解
    MySQL 处理海量数据时的一些优化查询速度方法
  • 原文地址:https://www.cnblogs.com/zhuxiang1633/p/9598681.html
Copyright © 2011-2022 走看看