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