bootstrap-fileinput多图片上传

时间:2022-01-14 00:19:06

在页面写一个input框:

<input id="subGraphAddress1" name="subGraphAddress" type="file" accept="image/jpg,image/png,image/gif,image/jpeg" />

页面导入的css和js文件:

<link href="/static/assets/bootstrap-fileinput-4.4.8/css/fileinput.min.css" rel="stylesheet" />
<link href="/static/assets/bootstrap-fileinput-4.4.8/css/fileinput-rtl.min.css" rel="stylesheet" />
<script src="/static/assets/bootstrap-fileinput-4.4.8/js/fileinput.min.js"></script>
<script src="/static/assets/bootstrap-fileinput-4.4.8/js/zh.js"></script>

javascript代码写在body外面:

<script th:inline="javascript">
    /*图片上传 */
    $("#subGraphAddress1")
            .fileinput({
                theme : 'fa',
                dropZoneTitle : "请上传小于5M的图片!",
                uploadUrl : "saveAddress",
                language : "zh",
                autoReplace : true,
                showCaption : false,
                showUpload : true,
                overwriteInitial : true,
                uploadAsync : true,
                showUploadedThumbs : true,
                maxFileCount : 5,
                minFileCount : 1,
                initialPreviewShowDelete : false,
                showRemove : false,
                showClose : false,
                autoReplace : true,
                overwriteInitial : true,
                layoutTemplates : {
                    actionDelete:'',    //去掉图片的删除按钮
                    actionUpload: '',
                },
                previewSettings : {
                    image : {
                        width : "100%",
                        height : "100%"
                    },
                }
            })
            
</script>

图片上传到ftp服务器的后台java代码:

public ModelMap saveSubAddress(@RequestParam("subGraphAddress") MultipartFile subGraphAddress,
            HttpServletRequest request, HttpServletResponse response) {
        ModelMap map = new ModelMap();
        // 主图的项目路径
        String paFileName = subGraphAddress.getOriginalFilename();

        try {
            FtpUtil ftpUtil = new FtpUtil();
            FTPClient ftp = ftpUtil.getConnectionFTP(UploadFileUrlUtil.HOST_NAEM, UploadFileUrlUtil.PORT,
                    UploadFileUrlUtil.USER_NAME, UploadFileUrlUtil.PASSWORD);
            filename = FtpUtil.getFileName(subGraphAddress);

            boolean bool = ftpUtil.uploadFile(ftp, UploadFileUrlUtil.GetPath(UploadFileUrlUtil.BIG_PATH), filename,
                    subGraphAddress.getInputStream());
            if (bool) {
                url = UploadFileUrlUtil.GetPath(UploadFileUrlUtil.BIG_PATH) + filename;
                map.put("subGraphAddress", url);
                map.put("viceGraphName", filename);
                System.out.println("上传成功!");
                boolean boolClose = ftpUtil.closeFTP(ftp);
                if (boolClose) {
                    System.out.println("关闭ftp连接成功!");
                } else {
                    System.out.println("关闭ftp连接失败!");
                }
            } else {
                System.out.println("上传失败!");
            }

        } catch (Exception e1) {
            // TODO Auto-generated catch block
            e1.printStackTrace();
        }
        return ReturnUtil.Success("加载成功", map, null);
    }

 远程服务器的配置信息:

public class UploadFileUrlUtil {  
//    远程服务器的配置信息
    public final static String HOST_NAEM="127.0.0.1";
    public final static Integer PORT=21;
    public final static String USER_NAME="123456";    //ftpuser
    public final static String PASSWORD="123456";
    public final static int LOCALHOST= 8080;
    
    public final static String BIG_PATH="/upload/picture/big/";  //主图路径
    public final static String SMALL_PATH="/upload/picture/small/";  //副图的路径
    public final static String VIDEO_PATH="/upload/picture/video/";  //视频的路径
    public final static String HOST= "http://192.168.0.140:8080";// 上传的端口
    
    public static String GetPath(String path) {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
        String date=sdf.format(new Date());
        return path+date+"/";
    }
}

 图片上传的js文件下载链接:  https://pan.baidu.com/s/1zwfJB00oKplfZIImLN6BWw 密码: atb6