bootstrap fileinput 插件的使用

最新推荐文章于 2023-12-25 14:17:08 发布

z303756980

最新推荐文章于 2023-12-25 14:17:08 发布

阅读量395

点赞数

分类专栏：工具

本文链接：https://blog.csdn.net/z303756980/article/details/83586471

版权

工具专栏收录该内容

5 篇文章 0 订阅

订阅专栏


使用bootstrap fileinput 需要初始化 
js部分 fileuploaded方法是上传成功 fileerror上传失败的回掉

$(function () {
      
        //初始化文件上传
        var uploadUrl=baseURL+"company/oss/upload";
        initFileInput("fish_file",uploadUrl);
      
}
)
function initFileInput(ctrlName,URL) {
    var control = $('#' + ctrlName);
    control.fileinput({
        language: 'zh', //设置语言
        uploadUrl: URL, //上传的地址
        allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
        //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
        uploadAsync: true, //默认异步上传
        showUpload: false, //是否显示上传按钮
        showRemove : true, //显示移除按钮
        showPreview : true, //是否显示预览
        showCaption: false,//是否显示标题
        browseClass: "btn btn-primary", //按钮样式
        dropZoneEnabled: false,//是否显示拖拽区域
        //minImageWidth: 50, //图片的最小宽度
        //minImageHeight: 50,//图片的最小高度
        //maxImageWidth: 1000,//图片的最大宽度
        //maxImageHeight: 1000,//图片的最大高度
        //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
        //minFileCount: 0,
        //maxFileCount: 10, //表示允许同时上传的最大文件个数
        enctype: 'multipart/form-data',
        validateInitialCount:true,
        uploadExtraData:{},
        previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
    }).on("fileuploaded", function (event, data, previewId, index) {    //一个文件上传成功
        console.log('文件上传成功！');
        // data.response.imgurl
        imgurl= data.response.imgurl;
    }).on('fileerror', function(event, data, msg) {  //一个文件上传失败
        console.log('文件上传失败！'+data.id);
    })
}

html部分 这里有还要bootsrap的js和css没有加上
css,js下载地址链接: https://pan.baidu.com/s/1ghKRgWz8BbypncGXPvDnpA 提取码: n5c8

<div class="form-group">
        <input id="fish_file" name="fish_file" type="file" multiple
               class="file"  data-show-upload="false" data-show-caption="true">
    </div>



<script src="${request.contextPath}/statics/js/modules/company/buildingMap.js"></script>
<link href="${request.contextPath}/statics/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<script src="${request.contextPath}/statics/libs/fileinput.js" type="text/javascript"></script>
<script src="${request.contextPath}/statics/libs/fileinput_locale_zh.js" type="text/javascript"></script>

具体的实现效果