bootstrap-fileinput的基本使用（图片/视频）

其他 2020-02-29 14:19:17 阅读次数: 0

 

目录

前言

编码实现（图片/视频）

上传图片

上传视频

资料

前言

最近写上传file用过好几次这个插件，每次都记不住，这里记录一下。

fileinput官方git地址：https://github.com/kartik-v/bootstrap-fileinput/tree/master

这里根据分支下需要的fileinput版本就行。

bootstrap官方下载地址：https://v3.bootcss.com/getting-started#download

编码实现（图片/视频）

引入相关的css跟js

<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="css/fileinput.min.css" rel="stylesheet" type="text/css" />
<link href="css/fileinput-rtl.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/fileinput.min.js"></script>

注意引入顺序，需要jquery支持，jquery版本不能低于1.9

上传图片

html

<div class="form-group" style="display:none" >
    <label for="carousel_img" class="col-sm-2 control-label">群图片介绍</label>
    <div class="col-sm-4">
        <input type="file" multiple="multiple" id="carousel_img" name="carousel_img" placeholder="群图片介绍"/>
        <input type="hidden" name="carouselImgs" id="carousel_imgs_hidden"/>
    </div>
</div>

js（添加）

<script th:inile="javascript">
    var carouselImgs = [] ;
    // 协会图片介绍
    $("#carousel_img").fileinput({
        uploadUrl: "/uploadFile/img",
        language: 'zh',
        allowedFileExtensions: ["jpg", "png", "gif"],
        dropZoneEnabled:false,
        showClose:false,
        showCaption: false,
        maxFileCount:10,
        showRemove:false,
        uploadAsync: true,
        enctype: 'multipart/form-data',
        validateInitialCount:true,
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
        fileActionSettings:{
            showRemove: true,
            showUpload: false,
            showDownload: true,
        },
        previewSettings: {
            image: {width: "200px", height: "160px"},
        },
        overwriteInitial: false,
    }).on("fileuploaded", function(event, data, previewId, index) {
        var fileName = data.response.data;
        $("#"+previewId).attr("fileName", fileName) ;
        carouselImgs.push(fileName) ;
        $("#carousel_imgs_hidden").val(carouselImgs) ;
    }).on("filesuccessremove", function(event, previewId, extra) {
        var fileName = $("#"+previewId).attr("fileName");
        var newCarouselImgs = [] ;
        for (var i = 0; i < carouselImgs.length; i++) {
            if (carouselImgs[i] != fileName)
                newCarouselImgs.push(carouselImgs[i]);
        }
        carouselImgs = newCarouselImgs ;
        $("#carousel_imgs_hidden").val(carouselImgs) ;
    })/*.on('filebatchselected', function(event, files) {
        // 选中文件自动上传
        $('#carousel_img').fileinput('upload');
    })*/;
</script>

java

@PostMapping("img")
public Object img(@RequestParam("carousel_img") MultipartFile file){
    String fileName = FileUploadUtil.uploadImage(file);
    return ResultVOUtil.getResult(ResultEnum.SUCCESS, fileName) ;
}
import org.apache.commons.io.FileUtils;
import org.springframework.web.multipart.MultipartFile;

import java.io.File;
import java.io.IOException;
import java.util.UUID;

public class FileUploadUtil {

    private static final String uploadPath = PropertieUtils.getString("upload.img.path");

    public static String uploadImage(MultipartFile file){
        String fileName = file.getOriginalFilename();
        fileName = UUID.randomUUID().toString().replace("-", "")
                .concat(fileName.substring(fileName.lastIndexOf("."))) ;
        try {
            FileUtils.copyInputStreamToFile(file.getInputStream(),new File(uploadPath, fileName));
        } catch (IOException e) {
            e.printStackTrace();
        }
        return fileName ;
    }

}

js（回显）

<script th:inline="javascript">
    var carouselImgs = [] ;
    // 获取协会图片介绍
    var initialPreviews = [[${foPlatePage.carouselImgs}]] == null ? [] :
            [[${foPlatePage.carouselImgs}]].split(",") ;
    var initialPreview = [] ;
    var initialPreviewConfig = [] ;
    for (var i = 0; i < initialPreviews.length; i++) {
        var fileName = initialPreviews[i] ;
        if (fileName != null && fileName !=''){
            var delImg = new Object() ;
            delImg.caption = fileName ;
            delImg.url = "/uploadFile/delImg?fileName=" + fileName ;
            initialPreview.push("/admin/showImg?fileName="+ fileName) ;
            initialPreviewConfig.push(delImg) ;
            carouselImgs.push(fileName) ;
        }
    }
    $("#carousel_imgs_hidden").val(carouselImgs) ;
    // 协会图片介绍
    $("#carousel_img").fileinput({
        uploadUrl: "/uploadFile/img",
        language: 'zh',
        allowedFileExtensions: ["jpg", "png", "gif"],
        dropZoneEnabled:false,
        showClose:false,
        showCaption: false,
        maxFileCount:10,
        showRemove:false,
        uploadAsync: true,
        enctype: 'multipart/form-data',
        validateInitialCount:true,
        msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
        fileActionSettings:{
            showRemove: true,
            showUpload: false,
            showDownload: true,
        },
        previewSettings: {
            image: {width: "200px", height: "160px"},
        },
        overwriteInitial: false,
        initialPreviewAsData: true,
        initialPreviewFileType: 'image',
        initialPreview:initialPreview,
        initialPreviewConfig:initialPreviewConfig
    }).on("fileuploaded", function(event, data, previewId, index) {
        var fileName = data.response.data;
        $("#"+previewId).attr("fileName", fileName) ;
        carouselImgs.push(fileName) ;
        $("#carousel_imgs_hidden").val(carouselImgs) ;
    }).on("filesuccessremove", function(event, previewId, extra) {
        var fileName = $("#"+previewId).attr("fileName");
        var newCarouselImgs = [] ;
        for (var i = 0; i < carouselImgs.length; i++) {
            if (carouselImgs[i] != fileName)
                newCarouselImgs.push(carouselImgs[i]);
        }
        carouselImgs = newCarouselImgs ;
        $("#carousel_imgs_hidden").val(carouselImgs) ;
    }).on('filedeleted', function(event, key, data) {
        var fileName = $.parseJSON(data.responseText).data ;
        var newCarouselImgs = [] ;
        for (var i = 0; i < carouselImgs.length; i++) {
            if (carouselImgs[i] != fileName)
                newCarouselImgs.push(carouselImgs[i]);
        }
        carouselImgs = newCarouselImgs ;
        $("#carousel_imgs_hidden").val(carouselImgs) ;
    })/*.on('filebatchselected', function(event, files) {
        // 选中文件自动上传
        $('#carousel_img').fileinput('upload');
    })*/;
</script>

上述代码就是上传图片的相关代码了，个别点说明一下。

fileuploaded

当图片上传成功之后回调的函数，这里回传了一个data。

通过data.response就可以拿到接口返回的数据。我返回的是{"code":0,"data":"xxx/xxx"}

所以我获取返回值是data.response.data

filesuccessremove

当图片成功删除之后回调的函数，比方说用户传了10张图片，这里删除了第5张图片，

就可以根据回调参数“previewId”来知道删除的是哪张图片，继而删除或者执行业务逻辑操作。

上传视频

html

<tr>
    <td>视频:</td>
    <td>
        <input type="file" name="videoFileAddress" class="uploadfile" accept="mp4,avi,dat,3gp,mov,rmvb"/>
    </td>
</tr>

js

<script th:inile="javascript">
    $(".uploadfile").fileinput({
        dropZoneTitle : "请上传小于150M的视频！",
        uploadUrl : "invitation/saveVideoAddress",
        language : "zh",
        autoReplace : true,
        showCaption : false,
        showUpload : false,
        showPreview:true,
        maxFileCount : 1,
        maxFileSize : 153600,
        initialPreviewShowDelete : false,
        showRemove : false,
        showClose : false,
        allowedFileExtensions : [ "mp4","avi","dat","3gp","mov","rmvb"],
        previewSettings : {
            image : {
                width : "100%",
                height : "100%"
            },
        },
        fileActionSettings : {
            removeIcon:'',
            removeClass:'',
            zoomIcon : '',
            zoomClass: '',
        }
    }).on("fileuploaded", function(event, data, previewId, index) {
        $("#fileAddress").val(data.response.videoAddress) ;
    }).on("filesuccessremove", function(event, previewId, extra) {
        $("#fileAddress").val('') ;
    }).on('filebatchselected', function(event, files) {
        // 选中文件自动上传
        $('.uploadfile').fileinput('upload');
    });
</script>

其他剩余代码就是上传的java相关代码了，跟上传图片类似，就不贴了。

资料

fileinput所有属性作用以及详细说明官方地址：http://plugins.krajee.com/file-input/plugin-options#top

option选项说明：

属性名

属性类型

描述说明

默认值

language

String

多语言设置，使用时需提前引入\locales文件夹下对应的语言文件，

中文zh，引入语言文件必须放在fileinput.js之后

'en'

showCaption

Boolean

是否显示被选文件的简介

true

showBrowse

Boolean

是否显示浏览按钮

true

showPreview

Boolean

是否显示预览区域

true

showRemove

Boolean

是否显示移除按钮

true,

showUpload

Boolean

是否显示上传按钮

true,

showCancel

Boolean

是否显示取消按钮

true,

showClose:

Boolean

是否显示关闭按钮

true

showUploadedThumbs

Boolean

true

browseOnZoneClick

Boolean

false

autoReplace

Boolean

是否自动替换当前图片，设置为true时，再次选择文件，

会将当前的文件替换掉。

false

generateFileId

Object

null

previewClass

String

添加预览按钮的类属性

‘’

captionClass

String

‘’

frameClass

String

'krajee-default'

mainClass

String

'file-caption-main'

mainTemplate

Object

null

purifyHtml

Boolean

true

fileSizeGetter

Object

null

initialCaption

String

''

initialPreview

Array/Object

[]

initialPreviewDelimiter

String

'*$$*'

initialPreviewAsData

Boolean

false

initialPreviewFileType

String

'image'

initialPreviewConfig

Array/Object

[]

initialPreviewThumbTags

Array/Object

[]

previewThumbTags

Object

{}

initialPreviewShowDelete

Boolean

true

removeFromPreviewOnError

Boolean

false

deleteUrl

String

删除图片时的请求路径

''

deleteExtraData

Object

删除图片时额外传入的参数

{}

overwriteInitial

Boolean

true

previewZoomButtonIcons

Object

{

prev: '<i class="glyphicon glyphicon-triangle-left"></i>',

  next: '<i class="glyphicon glyphicon-triangle-right"></i>',

  toggleheader: '<i class="glyphicon glyphicon-resize-vertical"></i>',

  fullscreen: '<i class="glyphicon glyphicon-fullscreen"></i>',

  borderless: '<i class="glyphicon glyphicon-resize-full"></i>',

  close: '<i class="glyphicon glyphicon-remove"></i>'

},

previewZoomButtonClasses

Object

{ 

prev: 'btn btn-navigate',

  next: 'btn btn-navigate',

  toggleheader: 'btn btn-default btn-header-toggle',

  fullscreen: 'btn btn-default',

  borderless: 'btn btn-default',

  close: 'btn btn-default'

},

preferIconicPreview

Boolrean

false

preferIconicZoomPreview

Boolrean

false

allowedPreviewTypes

undefined

undefined

allowedPreviewMimeTypes

Object

null

allowedFileTypes

Object

接收的文件后缀，如['jpg', 'gif', 'png'],不填将不限制上传文件后缀类型

null

allowedFileExtensions

Object

null

defaultPreviewContent

Object

null

customLayoutTags

Object

{}

customPreviewTags

Object

{}

previewFileIcon

String

'<i class="glyphicon glyphicon-file"></i>'

previewFileIconClass

String

'file-other-icon'

previewFileIconSettings

Object

{}

previewFileExtSettings

Object

{}

buttonLabelClass

String

'hidden-xs'

browseIcon

String

'<i class="glyphicon glyphicon-folder-open"></i>&nbsp;'

browseClass

String

'btn btn-primary'

removeIcon

String

'<i class="glyphicon glyphicon-trash"></i>'

removeClass

String

'btn btn-default'

cancelIcon

String

'<i class="glyphicon glyphicon-ban-circle"></i>'

cancelClass

String

'btn btn-default'

uploadIcon

String

'<i class="glyphicon glyphicon-upload"></i>'

uploadClass

String

'btn btn-default'

uploadUrl

String

上传文件路径

null

uploadAsync

boolean

是否为异步上传

true

uploadExtraData

上传文件时额外传递的参数设置

{}

zoomModalHeight

number

480

minImageWidth

String

图片的最小宽度

null

minImageHeight

String

图片的最小高度

null

maxImageWidth

String

图片的最大宽度

null

maxImageHeight

String

图片的最大高度

null

resizeImage

boolean

false

resizePreference

String

'width'

resizeQuality

number

0.92

resizeDefaultImageType

String

'image/jpeg'

minFileSize

number

单位为kb，上传文件的最小大小值

0

maxFileSize

number

单位为kb，如果为0表示不限制文件大小

0

resizeDefaultImageType

number

25600(25MB)

minFileCount

number

表示同时最小上传的文件个数

0

maxFileCount

number

表示允许同时上传的最大文件个数

0

validateInitialCount

boolean

false

msgValidationErrorClass

String

'text-danger'

msgValidationErrorIcon

String

'<i class="glyphicon glyphicon-exclamation-sign"></i> '

msgErrorClass

String

'file-error-message'

progressThumbClass

String

"progress-bar progress-bar-success progress-bar-striped active"

rogressClass

String

"progress-bar progress-bar-success progress-bar-striped active"

progressCompleteClass

String

"progress-bar progress-bar-success"

progressErrorClass

String

"progress-bar progress-bar-danger"

progressUploadThreshold

number

99

previewFileType

String

预览文件类型,内置['image', 'html', 'text', 'video', 'audio', 'flash', 'object',‘other‘]等格式

'image'

elCaptionContainer

String

null

elCaptionText

String

设置标题栏提示信息

null

elPreviewContainer

String

null

elPreviewImage

String

null

elPreviewStatus

String

null

elErrorContainer

String

null

errorCloseButton

String

'<span class="close kv-error-close">&times;</span>'

slugCallback

String

 暂时没有搜到说明，调试显示，在文件选择后会调到这个方法。

null

dropZoneEnabled

boolean

是否显示拖拽区域

true

dropZoneTitleClass

String

拖拽区域类属性设置

'file-drop-zone-title'

fileActionSettings

Object

{}

otherActionButtons

String

''

textEncoding

String

编码设置

'UTF-8'

ajaxSettings

Object

{}

ajaxDeleteSettings

Object

{}

showAjaxErrorDetails

boolean

true

Method说明：

方法名

参数

描述

fileerror

异步上传错误结果处理

$('#uploadfile').on('fileerror', function(event, data, msg) {

});

fileuploaded

异步上传成功结果处理

$("#uploadfile").on("fileuploaded", function (event, data, previewId, index) {

})

filebatchuploaderror

同步上传错误结果处理

$('#uploadfile').on('filebatchuploaderror', function(event, data, msg) {

});

filebatchuploadsuccess

同步上传成功结果处理

$('#uploadfile').on('filepreupload', function(event, data, previewId, index) {    

});

filebatchselected

选择文件后处理事件

$("#fileinput").on("filebatchselected", function(event, files) {

});

upload

文件上传方法

$("#fileinput").fileinput("upload");

fileuploaded

上传成功后处理方法

$("#fileinput").on("fileuploaded", function(event, data, previewId, index) {

});

filereset

fileclear

点击浏览框右上角X 清空文件前响应事件

$("#fileinput").on("fileclear",function(event, data, msg){

});

filecleared

点击浏览框右上角X 清空文件后响应事件

$("#fileinput").on("filecleared",function(event, data, msg){

});

fileimageuploaded

在预览框中图片已经完全加载完毕后回调的事件

对你有帮助的话，右上角给个赞呗~

954L
发布了61 篇原创文章 · 获赞 90 · 访问量 14万+
私信 关注

猜你喜欢

转载自blog.csdn.net/wkh___/article/details/98059183
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022