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 插件开发备注
Aug 27 Javascript
jQuery.event兼容各浏览器的event详细解析
Dec 18 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
Javascript中replace()小结
Sep 30 Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
Nov 24 Javascript
基于jQuery实现点击列表加载更多效果
May 31 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
Aug 20 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
JS实现电话号码的字母组合算法示例
Feb 26 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 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采集相关教程之一 CURL函数库
2010/02/15 PHP
浅谈本地WAMP环境的搭建
2015/05/13 PHP
PHP的全局错误处理详解
2016/04/25 PHP
WordPress中设置Post Type自定义文章类型的实例教程
2016/05/10 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
ImageFlow可鼠标控制图片滚动
2008/01/30 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
2015/02/02 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
vue组件初学_弹射小球(实例讲解)
2017/09/06 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
2020/01/07 Javascript
微信小程序中data-key属性之数据传输(经验总结)
2020/08/22 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
Python3实现简单可学习的手写体识别(实例讲解)
2017/10/21 Python
浅谈python中的占位符
2017/11/09 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
python 制作自定义包并安装到系统目录的方法
2018/10/27 Python
Django实现文件上传下载功能
2019/10/06 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
python 如何设置守护进程
2020/10/29 Python
python温度转换华氏温度实现代码
2020/12/06 Python
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
机械专业应届生求职信
2013/09/21 职场文书
自主招生自荐信指南
2014/02/04 职场文书
《走一步再走一步》教学反思
2014/02/15 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
2015初中团支部工作总结
2015/07/21 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
考生诚信考试承诺书(2016版)
2016/03/25 职场文书