Bootstrap FileInput实现图片上传功能
这篇文章主要为大家详细介绍了Bootstrap FileInput实现图片上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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); } } }) }); }); |
以上就是本文的全部内容,希望对大家的学习有所帮助