本文实例为大家分享了Bootstrap FileInput实现图片上传功能的具体代码，供大家参考，具体内容如下
html代码：
|
1
2
3
4
5
6
7
|
<div class="form-group"> <label class="col-sm-2 control-label">图片</label> <div class="col-sm-8"> <input id="filesInput" type="file" multiple data-browse-on-zone-click="true" class="file-loading" accept="image/*" /> <input id="resources" name="resources" th:value="${record.picUrls}" type="hidden">//获取上传的图片路径，$("#filesInput").val()获取不到，用隐藏的input来获取 </div></div> |
引入js和css文件
|
1
2
3
4
|
<link href="/ajax/libs/bootstrap-fileinput/fileinput.css" rel="stylesheet" type="text/css"/><script th:src="@{/js/jquery.min.js}"></script><script th:src="@{/js/bootstrap.min.js}"></script><script th:src="@{/ajax/libs/bootstrap-fileinput/fileinput.js}"></script> |
js代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
var List = new Array();//定义一个全局变量去接受文件名和id$(function () { var picStr = [http:...,http:....];var picStrConfig = [{caption: "11111", width: "120px", fileid:"123456", url: "deleteData", type:"image", key: "1"},........];$('#filesInput').fileinput({ theme: 'fas', language: 'zh', uploadUrl: ctx + 'bike/record/uploadData', uploadAsync: true, //默认异步上传 showUpload: true, //是否显示上传按钮 overwriteInitial: false, showRemove : false, //显示移除按钮 // showPreview : true, //是否显示预览 showCaption: false,//是否显示标题 browseClass: "btn btn-primary", //按钮样式 dropZoneEnabled: false,//是否显示拖拽区域 maxFileCount: 5, //表示允许同时上传的最大文件个数 enctype: 'multipart/form-data', validateInitialCount:true, layoutTemplates: {actionUpload: ''}, maxFilesNum: 5, fileType: "any", allowedPreviewTypes: ['image'], previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", initialPreviewAsData: true, initialPreview: picStr, //初始化回显图片路径 initialPreviewConfig: picStrConfig //配置预览中的一些参数 }).on("fileuploaded", function (event, data, previewId, index) { var response = data.response; var filePath = data.response.filePath; //文件上传成功返回的文件名，可返回自定义文件名 List.push({ FileName: filePath, KeyID: previewId }) // alert(response.filePath); // $("#fileMd5").val(response.fileMd5); // $("#version").val(response.newVersionName); var resources = $('#resources').val(); if (!resources){ $("#resources").val(response.filePath); }else{ $("#resources").val(resources+"^_^"+response.filePath); } }).on('filepredelete', function(event, data, previewId, index) { //删除原图片之前的触发动作 }).on('filedeleted',function (event, data, previewId, index) {//删除原图片之后的动作 var resources = $("#resources").val(); var respone = previewId.responseJSON; if(respone.code == 0){ var deleteName = "/"+data; if(resources.indexOf("^_^"+deleteName)>-1){ $("#resources").val("^_^"+resources.replace(deleteName,"")); resources = $("#resources").val(); } if(resources.indexOf(deleteName+"^_^")>-1){ $("#resources").val(resources.replace(deleteName+"^_^","")); resources = $("#resources").val(); } if(resources.indexOf(deleteName)>-1){ $("#resources").val(resources.replace(deleteName,"")); resources = $("#resources").val(); } }}).on('filepreupload', function(event, data, previewId, index) { var form = data.form, files = data.files, extra = data.extra, response = data.response, reader = data.reader;}).on("filesuccessremove", function (event, data, previewId, index) { var resources = $("#resources").val(); for (var i = 0; i < List.length; i++) { if (List[i].KeyID == data) { if(resources.indexOf("^_^"+List[i].FileName)>-1){ $("#resources").val("^_^"+resources.replace(List[i].FileName,"")); resources = $("#resources").val(); } if(resources.indexOf(List[i].FileName+"^_^")>-1){ $("#resources").val(resources.replace(List[i].FileName+"^_^","")); resources = $("#resources").val(); } if(resources.indexOf(List[i].FileName)>-1){ $("#resources").val(resources.replace(List[i].FileName,"")); resources = $("#resources").val(); } List[i].KeyID = "1" } }})；}) |
java代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
/** * 上传文件*/ @RequestMapping("/uploadData") @ResponseBody public Map<String, Object> uploadData(HttpServletRequest request, HttpServletResponse response) throws Exception{ request.setCharacterEncoding("UTF-8"); Map<String, Object> json = new HashMap<String, Object>(); MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request; /** 页面控件的文件流* */ MultipartFile multipartFile = null; Map map =multipartRequest.getFileMap(); for (Iterator i = map.keySet().iterator(); i.hasNext();) { Object obj = i.next(); multipartFile=(MultipartFile) map.get(obj); } /** 获取文件的后缀* */ String filename = multipartFile.getOriginalFilename(); InputStream inputStream; String path = ""; String fileMd5 = ""; try { /** 文件上传到存储库中 **/ inputStream = multipartFile.getInputStream(); File tmpFile = File.createTempFile(filename, filename.substring(filename.lastIndexOf("."))); fileMd5 = Files.hash(tmpFile, Hashing.md5()).toString(); FileUtils.copyInputStreamToFile(inputStream, tmpFile); /** 上传到 MinIO上 **/ path = minioFileUtil.uploadCustomize(multipartFile.getInputStream(), filename.substring(filename.lastIndexOf(".")), "",multipartFile.getContentType()); /** 上传 到 阿里云oss **/// path = AliOSSUtils.getInstance().multpartFileUpload(multipartFile,"bike"); tmpFile.delete(); } catch (Exception e) { e.printStackTrace(); logger.error("上传失败",e); json.put("fileMd5", fileMd5); json.put("message", "上传失败"); json.put("status", false); json.put("filePath", path); return json; } json.put("fileMd5", fileMd5); json.put("message", "上传成功"); json.put("status", true); json.put("filePath", path); json.put("key", UUIDGenerator.getUUID()); return json; } |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
/** * 删除文件文件 */@RequestMapping("/edit/deleteData/{id}")@ResponseBody@Transactional(rollbackFor = Exception.class)public AjaxResult deleteData(@PathVariable("id")String id, HttpServletRequest request) throws Exception{ String key = request.getParameter("key"); Record record = recordService.getById(id); String picUrls = record.getPicUrls(); String deleteName = "/" + key; if (picUrls.indexOf("^_^" + deleteName) > -1) { picUrls = "^_^" + picUrls.replace(deleteName, ""); } if (picUrls.indexOf(deleteName + "^_^") > -1) { picUrls = picUrls.replace(deleteName + "^_^", ""); } if (picUrls.indexOf(deleteName) > -1) { picUrls = picUrls.replace(deleteName, ""); } record.setPicUrls(picUrls); if (recordMapper.updatePicsById(record) == 1) { /** 先删除数据库中的图片路径 再删除图片存储的源文件。**/ minioUtil.removeObject(bucketName, key); return success(key); } return error();} |
修改 fileInput 源码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
self._handler($el, 'click', function () { if (!self._validateMinCount()) { return false; } self.ajaxAborted = false; self._raise('filebeforedelete', [vKey, extraData]); //noinspection JSUnresolvedVariable,JSHint $.modal.confirm("确定删除原文件？删除后不可恢复",function () { //初始化回显的图片在删除时弹出提示框确认。 if (self.ajaxAborted instanceof Promise) { self.ajaxAborted.then(function (result) { if (!result) { $.ajax(settings); } }); } else { if (!self.ajaxAborted) { $.ajax(settings); } } }) });}); |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/qq_33358864/article/details/113172770
