标签:上传 hicon .post res var show out sts 数据类型
<link rel="stylesheet" type="text/css" th:href="@{/js/bootstrap/css/bootstrap.css}"> <link rel="stylesheet" type="text/css" th:href="@{/js/bootstrap/fileinput/css/fileinput.css}"> <!-- 加入FileInput --> <script th:src="@{/js/jquery-3.3.1.min.js}"></script> <script th:src="@{/js/bootstrap/js/bootstrap.js}"></script> <script th:src="@{/js/bootstrap/fileinput/js/fileinput.js}"></script> <script th:src="@{/js/bootstrap/fileinput/js/zh.js}"></script>/*语言环境*/
二、表单
<form class="form" action="#" method="post" enctype="multipart/form-data" id="pollutionForm"> <!-- 注意事项:Input type类型为file class为样式 id随意 name随意 multiple(如果是要多图上传一定要加上,不加的话每次只能选中一张图)--> 图片:<input type="file" class="file" id="img" multiple name="images"><br> </form>
三、JavaScript代码
<script>/**/ var imageData = []; //多图上传返回的图片属性接受数组 这里是因为我在做表单其他属性提交的时候使用,在这里我没有将别的input写出来 $("#img").fileinput({ language : ‘zh‘, uploadUrl : "/image/save-test", showUpload: true, //是否显示上传按钮 showRemove : true, //显示移除按钮 showPreview : true, //是否显示预览 showCaption: false,//是否显示标题 autoReplace : true, minFileCount: 0, uploadAsync: true, maxFileCount: 10,//最大上传数量 browseOnZoneClick: true, msgFilesTooMany: "选择上传的文件数量 超过允许的最大数值!", enctype: ‘multipart/form-data‘, // overwriteInitial: false,//不覆盖已上传的图片 allowedFileExtensions : [ "jpg", "png", "gif" ], browseClass : "btn btn-primary", //按钮样式 previewFileIcon : "<i class=‘glyphicon glyphicon-king‘></i>" }).on("fileuploaded", function(e, data) {//文件上传成功的回调函数,还有其他的一些回调函数,比如上传之前... var res = data.response; console.log(res) imageData.push({ "path": res.data.path, "date":res.data.date }); console.log(imageData); }); </script>
四、后台代码
//图片类 import java.util.Date; /** * 图片类 */ public class Img { private String name; private String path; private Date date; public Img() { } public Img(String path, Date date) { this.path = path; this.date = date; } public Img(String name, String path, Date date) { this.name = name; this.path = path; this.date = date; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getPath() { return path; } public void setPath(String path) { this.path = path; } public Date getDate() { return date; } public void setDate(Date date) { this.date = date; } @Override public String toString() { return "Img{" + "name=‘" + name + ‘\‘‘ + ", path=‘" + path + ‘\‘‘ + ", date=" + date + ‘}‘; } } //图片上传Controller public class UploadController { //fileinput 其实每次只会上传一个文件 多图上传也是分多次请求,每次上传一个文件 所以不需要循环 @RestController //@RequestParam("images") 这里的images对应表单中name 然后MultipartFile 参数名就可以任意了 @RequestMapping(value = "/image/save-test",method = RequestMethod.POST) public UploadResponseData saveImg(@RequestParam("images") MultipartFile file) throws IOException { String pathname = ""; String returnPath = ""; if (!file.isEmpty()){ String fileName = file.getOriginalFilename(); File path = new File(ResourceUtils.getURL("classpath:").getPath());//获取Spring boot项目的根路径,在开发时获取到的是/target/classes/ System.out.println(path.getPath());//如果你的图片存储路径在static下,可以参考下面的写法 File uploadFile = new File(path.getAbsolutePath(), "static/images/upload/");//开发测试模式中 获取到的是/target/classes/static/images/upload/ if (!uploadFile.exists()){ uploadFile.mkdirs(); } //获取文件后缀名 String end = FilenameUtils.getExtension(file.getOriginalFilename()); DateFormat df = new SimpleDateFormat("yyyyMMddHHmmssSSS"); //图片名称 采取时间拼接随机数 String name = df.format(new Date()); Random r = new Random(); for(int i = 0 ;i < 3 ;i++){ name += r.nextInt(10); } String diskFileName = name + "." +end; //目标文件的文件名 pathname = uploadFile.getPath()+ "/" + diskFileName; System.out.println(pathname); returnPath = "images/upload/" + diskFileName;//这里是我自己做返回的字符串 file.transferTo(new File(pathname));//文件转存 }//UploadResponseData 自定义返回数据类型实体{int code, String msg, Object data} return new UploadResponseData(CodeEnum.SUCCESS.getCode(),MsgEnum.SUCCESS.getMsg(),new Img(returnPath,new Date())); } }
五、总结吧
最后在这里想说一些问题
1、spring boot路径获取问题:
ResourceUtils.getURL("classpath:").getPath(); 在开发环境下获取到的是项目根路径/target/class/
Spring Boot+BootStrap fileInput 多图片上传
标签:上传 hicon .post res var show out sts 数据类型
原文地址:https://www.cnblogs.com/threadj/p/9382525.html