在页面写一个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