Bootstrap FileInput实现图片上传功能


Posted in Javascript onJanuary 28, 2021

本文实例为大家分享了Bootstrap FileInput实现图片上传功能的具体代码,供大家参考,具体内容如下

html代码:

<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文件

<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代码:

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代码:

/**
  * 上传文件
*/
 @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;
 }
/**
 * 删除文件文件
 */
@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 源码:

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);
   }
  }
  })
 });
});

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 语言基础知识点总结(思维导图)
Nov 10 Javascript
Json和Jsonp理论实例代码详解
Nov 15 Javascript
js控制href内容的连接内容的变化示例
Apr 30 Javascript
jQuery插件Tmpl的简单使用方法
Apr 27 Javascript
js实现的早期滑动门菜单效果代码
Aug 27 Javascript
深入解析JavaScript中的立即执行函数
May 21 Javascript
js仿腾讯QQ的web登陆界面
Aug 19 Javascript
bootstrap 路径导航 分页 进度条的实例代码
Aug 06 Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 Javascript
JavaScript 继承 封装 多态实现及原理详解
Jul 29 Javascript
关于vue组件事件属性穿透详解
Oct 28 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
js实现简单的倒计时
Jan 28 #Javascript
原生js实现无缝轮播图效果
Jan 28 #Javascript
JavaScript实现4位随机验证码的生成
Jan 28 #Javascript
JavaScript点击按钮生成4位随机验证码
Jan 28 #Javascript
Vue ​v-model相关知识总结
Jan 28 #Vue.js
Vue 数据响应式相关总结
Jan 28 #Vue.js
node使用async_hooks模块进行请求追踪
Jan 28 #Javascript
You might like
php性能优化分析工具XDebug 大型网站调试工具
2011/05/22 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
爱恋千雪-US-AscII加密解密工具(网页加密)下载
2007/06/06 Javascript
asp(javascript)全角半角转换代码 dbc2sbc
2009/08/06 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
jquery 3D球状导航的文章分类
2010/07/06 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
Javascript实现图片轮播效果(一)让图片跳动起来
2016/02/17 Javascript
jQuery插件简单学习实例教程
2016/07/01 Javascript
Js操作DOM元素及获取浏览器高宽的简单方法
2016/09/08 Javascript
微信小程序 教程之引用
2016/10/18 Javascript
webpack学习笔记之代码分割和按需加载的实例详解
2017/07/20 Javascript
完美解决axios在ie下的兼容性问题
2018/03/05 Javascript
jQuery替换节点元素的操作方法
2018/03/18 jQuery
Vue自定义指令封装节流函数的方法示例
2018/07/09 Javascript
详解三种方式解决vue中v-html元素中标签样式
2018/11/22 Javascript
Typescript的三种运行方式(小结)
2019/09/18 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
解决vue watch数据的方法被调用了两次的问题
2020/11/07 Javascript
Python中super关键字用法实例分析
2015/05/28 Python
python处理按钮消息的实例详解
2017/07/11 Python
python通过zabbix api获取主机
2018/09/17 Python
python实现代码统计程序
2019/09/19 Python
解决Pytorch训练过程中loss不下降的问题
2020/01/02 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
Python小白垃圾回收机制入门
2020/06/09 Python
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
个人学习群众路线心得体会
2014/11/05 职场文书
2016大学生社会实践单位评语
2015/12/01 职场文书
自制短波长线天线频率预选器 - 成功消除B2K之流的镜像
2021/04/22 无线电
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL