BootStrap FileInput

BootStrap FileInput是一款非常优秀的HTML5文件上传插件，支持文件预览、多选等一系列特性。
BootStrap FileInput样式设计的非常美观，功能也很齐全。是一款很好用的上传组件。之前也用过Layui的上传组件，这两款上传组件平分秋色，各有各的特点，总而言之，都是很实用而且很美观的上传组件，想了解Layui上传组件的请移步：Layui上传组件的使用

先来看一下效果图

选择后

查看详情，可以放大，全屏预览。

选择多张图片

引入插件的样式文件

插件下载地址：https://github.com/kartik-v/bootstrap-fileinput

<link href="static/bootstrap-fileinput/css/fileinput.css" type="text/css" rel="stylesheet" />
<script src="static/bootstrap-fileinput/js/fileinput.min.js"></script>
<script src="static/bootstrap-fileinput/js/locales/zh.js"></script>

在页面上添加input标签

<div style="width: 800px;">
    <input type="file" name="file" id="file" multiple class="file"  />
</div>

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

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

<script type="text/javascript">
    $('#file').fileinput({
        language: 'zh',     //设置语言
        dropZoneEnabled: true,      //是否显示拖拽区域
        dropZoneTitle: "可以将图片拖放到这里",    //拖拽区域显示文字
        uploadUrl: 'file/imgSave',  //上传路径
        allowedFileExtensions: ['jpg', 'png', 'gif', 'jpeg'],   //指定上传文件类型
        maxFileSize: 0,
        maxFileSize: 2048,   //上传文件最大值，单位kb
        uploadAsync: true,  //异步上传
        maxFileCount: 2    //上传文件最大个数。
    }).on("fileuploaded", function(event,data) { //异步上传成功后回调
        console.log(data);		//data为返回的数据
    });
</script>

关于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的更多属性

关于BootStrap FileInput的使用就这些了，有不足之处欢迎家指出。