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 相关文章推荐
一些有关检查数据的JS代码
Sep 07 Javascript
JavaScript DOM 学习第九章 选取范围的介绍
Feb 19 Javascript
AeroWindow 基于JQuery的弹出窗口插件
Jun 27 Javascript
JavaScript 代码压缩工具小结
Feb 27 Javascript
各浏览器对document.getElementById等方法的实现差异解析
Dec 05 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
JsRender实用入门教程
Oct 31 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
angularjs 页面自适应高度的方法
Jan 17 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 Javascript
JavaScript实现简单计时器
Jun 22 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与MySQL交互使用详解
2006/10/09 PHP
Windows IIS PHP 5.2 安装与配置方法
2009/06/08 PHP
php二维数组排序方法(array_multisort usort)
2013/12/25 PHP
PHP实现AES256加密算法实例
2014/09/22 PHP
php轻松实现文件上传功能
2016/03/03 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
2016/12/02 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
JavaScript多线程的实现方法
2007/05/08 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
jquery文本框中的事件应用以输入邮箱为例
2014/05/06 Javascript
JavaScript获取某年某月的最后一天附截图
2014/06/23 Javascript
jQuery中:text选择器用法实例
2015/01/03 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
Angular.JS学习之依赖注入$injector详析
2016/10/20 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
jQuery ajax仿Google自动提示SearchSuggess功能示例
2019/03/28 jQuery
JavaScript函数式编程(Functional Programming)纯函数用法分析
2019/05/22 Javascript
vue引用外部JS的两种种方法
2020/01/28 Javascript
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
2020/07/26 Javascript
Linux上安装Python的PIL和Pillow库处理图片的实例教程
2016/06/23 Python
在Python中输入一个以空格为间隔的数组方法
2018/11/13 Python
python语言元素知识点详解
2019/05/15 Python
pyqt 实现在Widgets中显示图片和文字的方法
2019/06/13 Python
pycharm访问mysql数据库的方法步骤
2019/06/18 Python
学会迭代器设计模式,帮你大幅提升python性能
2021/01/03 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
卡骆驰新加坡官网:Crocs新加坡
2018/06/12 全球购物
年终自我鉴定
2013/10/09 职场文书
市场推广策划方案
2014/06/02 职场文书
应届毕业生求职信范文
2014/07/07 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
工作收入证明模板
2015/06/12 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
P站美图推荐——变身女主角特辑
2022/03/20 日漫
Django基础CBV装饰器和中间件
2022/03/22 Python