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 相关文章推荐
JQuery 选择器、过滤器介绍
Feb 14 Javascript
js有关元素内容操作小结
Dec 20 Javascript
javascript中数组的concat()方法使用介绍
Dec 18 Javascript
js获取日期:昨天今天和明天、后天
Jun 11 Javascript
Javascript数组与字典用法分析
Dec 13 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
关于js原型的面试题讲解
Sep 25 Javascript
javascript实现文字无缝滚动效果
Aug 26 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
js微信分享接口调用详解
Jul 23 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 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
《魔兽争霸3》重制版究竟重制了什么?玩家:这么糊弄真的好吗?
2020/05/04 魔兽争霸
thinkphp判断访客为手机端或PC端的方法
2014/11/24 PHP
Javascript将string类型转换int类型
2010/12/09 Javascript
删除select中所有option选项jquery代码
2013/08/12 Javascript
Javascript 实现的数独解题算法网页实例
2013/10/15 Javascript
jquery实现点击消失的代码
2014/03/03 Javascript
js使用removeChild方法动态删除div元素
2014/08/01 Javascript
node.js中的url.resolve方法使用说明
2014/12/10 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
动态设置form表单的action属性的值的简单方法
2016/05/25 Javascript
js友好的时间返回函数
2016/08/24 Javascript
巧用Javascript的逻辑运算符
2016/12/02 Javascript
JS多文件上传的实例代码
2017/01/11 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
JS使用setInterval实现的简单计时器功能示例
2018/04/19 Javascript
解决ie11 SCRIPT5011:不能执行已释放Script的代码问题
2019/05/05 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
解决layui动态加载复选框无法选中的问题
2019/09/20 Javascript
茶余饭后聊聊Vue3.0响应式数据那些事儿
2019/10/30 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
利用numpy+matplotlib绘图的基本操作教程
2017/05/03 Python
Django 跨域请求处理的示例代码
2018/05/02 Python
Python实现模拟浏览器请求及会话保持操作示例
2018/07/30 Python
Python延时操作实现方法示例
2018/08/14 Python
Python之时间和日期使用小结
2019/02/14 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
Python通过文本和图片生成词云图
2020/05/21 Python
win10安装python3.6的常见问题
2020/07/01 Python
GitHub上值得推荐的8个python 项目
2020/10/30 Python
.net笔试题
2014/03/03 面试题
介绍一下write命令
2012/09/24 面试题
销售简历自我评价
2014/01/24 职场文书
建筑安全生产目标责任书
2014/07/23 职场文书
党员干部反四风对照检查材料思想汇报
2014/09/14 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
Pandas 数据编码的十种方法
2022/04/20 Python