BootStrap FileInput 文件上传组件使用指南

最新推荐文章于 2025-03-27 15:10:49 发布

2501_90225546

最新推荐文章于 2025-03-27 15:10:49 发布

阅读量1.7k

点赞数 6

文章标签： bootstrap javascript 前端

本文链接：https://blog.youkuaiyun.com/2501_90225546/article/details/145191401

版权

可以通过input标签外的div设置组件显示的大小。
type=“file”，指明其为input file类型。
name指定其在后台的接收参数的key。
id=“file”，通过id选中DOM元素，对上传组件进行渲染。
multiple，这个属性很重要，如果没有这个属性，渲染上传组件时，有些属性没有效果，下面有说明。

通过JS渲染初始化上传组件

关于Fileinput的属性这里只设置了部分，下面有Fileinput的全部属性，可以参考根据项目需求添加。

其中maxFileCount属性设置上传文件上限，如果input标签中没有multiple属性，则没有效果。多图片上传，点击上传时会发送多次请求。

uploadAsync设置上传方式，异步上传，点击上传按钮后在上传。同步上传，选择完图片后就上传。

allowedFileExtensions指定上传文件的类型，BootStrap FileInput 可以效验文件类型，如果不是指定类型则给出提示。

在这里插入图片描述

uploadUrl设置上传路径，也就是服务器保存图片后台对应的方法代码如下。

@RequestMapping(value = “imgSave”)

@ResponseBody

public Map imgSave(MultipartFile file){

Map<String, Object> map = new HashMap();

try{

String uuid = UUID.randomUUID().toString()+“.jpg”;

Boolean bool = fileService.saveFile(file, uuid);

map.put(“result”, bool);

map.put(“msg”, “上传成功”);

return map;

}catch (Exception e){

map.put(“result”, false);

map.put(“msg”, “上传失败”);

return map;

}

其中saveFile方法是文件保存方法，代码如下。上传成功返回true，失败则返回false。

// 图片存放位置

private final static String IMAGEPATH=“E:\bootstrap\image”;

//保存图片

@Transactional

public boolean saveFile(MultipartFile file, String uuid){

try{

File path = path(file.getContentType());

String filename = file.getOriginalFilename();

SysFile fileEntity = new SysFile();

fileEntity.setFileName(filename);

fileEntity.setUuid(uuid);

String storeaddress = path.getAbsolutePath();

fileEntity.setStoreaddress(storeaddress);

File saveFile = new File(path,uuid);

try {

fileRepository.save(fileEntity);

file.transferTo(saveFile);

return true;

} catch (IllegalStateException | IOException e) {

e.printStackTrace();

return false;

}

}catch (Exception e){

System.out.println(“图片保存异常”);

return false;

}

//图片地址是否存在

private File path(String filename) {

File pat=new File(“E:\bootstrap”);

File path=new File(SysFileService.IMAGEPATH);

if(!pat.isDirectory()) {

pat.mkdir();

}

if(!path.isDirectory()) {

path.mkdir();

}

return path;

}

图片上传完成后返回的函数回调数据。包含一些图片上传信息以及后台返回信息。

在这里插入图片描述

上传完成后效果

在这里插入图片描述

Fileinput的更多属性

| 性名 | 属性类型 | 描述说明 | 默认值 |

| — | — | — | — |

| previewThumbTags | Object | | {} |

| deleteExtraData | Object | 删除图片时额外传入的参数 | {} |

| previewZoomButtonIcons | Object | | {prev: ‘’,next: ‘’,toggleheader: ‘’,fullscreen: ‘’,borderless: ‘’,close: ‘’} |

| 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’} |

| customLayoutTags | Object | | {} |

| customPreviewTags | Object | | {} |

| previewFileIconSettings | Object | | {} |

| previewFileExtSettings | Object | | {} |

| uploadExtraData | Object | 上传文件时额外传递的参数设置 | {} |