• 售前

  • 售后

热门帖子
入门百科

Bootstrap FileInput实现图片上传功能

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

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作