bootstrap fileinput组件整合Springmvc上传图片到本地磁盘


Posted in Javascript onMay 11, 2017

整合前的准备步骤

1.搭建好基础框架,本文用的是SSM(Spring+SpringMVC+Mybatis),这里的过程就不在本文中讲了,之前我做个一个demo(ssm整合+用户模块),可以参考这个搭建好。

2.下载bootstrap fileinput组件源码:

https://github.com/kartik-v/bootstrap-fileinput/

搭建后的效果图

图1.

bootstrap fileinput组件整合Springmvc上传图片到本地磁盘

图2.

bootstrap fileinput组件整合Springmvc上传图片到本地磁盘

图3.

bootstrap fileinput组件整合Springmvc上传图片到本地磁盘

图4.

bootstrap fileinput组件整合Springmvc上传图片到本地磁盘

图5.

bootstrap fileinput组件整合Springmvc上传图片到本地磁盘

在需要编写的jsp页面引入组件

本工程的路径界面如下:

bootstrap fileinput组件整合Springmvc上传图片到本地磁盘

在jsp引入组件需要的js,css,如下代码:

<!-- jq -->
<script type="text/javascript"
 src="<%=basePath%>static/plugs/jquery-3.1.1.min.js"></script>
<!-- bootstrap -->
<link rel="stylesheet"
 href="<%=basePath%>static/plugs/bootstrap/css/bootstrap.min.css" rel="external nofollow" >
<script type="text/javascript"
 src="<%=basePath%>static/plugs/bootstrap/js/bootstrap.min.js"></script>
<link href="<%=basePath%>css/xlstyle.css" rel="external nofollow" rel="stylesheet">
<!-- 图片上传即使预览插件 -->
<link rel="stylesheet"
 href="<%=basePath%>static/plugs/bootstrap-fileinput/css/fileinput.min.css" rel="external nofollow" >
<script type="text/javascript"
 src="<%=basePath%>static/plugs/bootstrap-fileinput/js/fileinput.min.js"></script>
 <!-- 这个是汉化-->
<script type="text/javascript"
 src="<%=basePath%>static/plugs/bootstrap-fileinput/js/locales/zh.js"></script>

引入组件,这里以我自己写的网站为例:

<form class="form-horizontal" role="form" method="post"
     action="<%=basePath%>addArticle" enctype="multipart/form-data">
     <div class="form-group">
      <label class="col-sm-2 control-label">菜谱名称</label>
      <div class="col-sm-10">
       <input type="text" name="describ" class="col-sm-10 form-control"
        placeholder="菜谱名称">
      </div>
     </div>
     <div class="form-group">
      <label class="col-sm-2 control-label">菜谱封面</label>
      <div class="col-sm-10">
       <input type="file" name="myfile" data-ref="url2"
        class="col-sm-10 myfile" value="" /> <input type="hidden"
        name="url2" value="">
      </div>
     </div>

还有需要配置组件的详细js,我这里是放在了标签结束的后面:

以上省略

.........

</body>
<script type="text/javascript">
 $(".myfile").fileinput({
  //上传的地址
  uploadUrl:"<%=basePath%>food/uploadFile",
  uploadAsync : true, //默认异步上传
  showUpload : false, //是否显示上传按钮,跟随文本框的那个
  showRemove : false, //显示移除按钮,跟随文本框的那个
  showCaption : true,//是否显示标题,就是那个文本框
  showPreview : true, //是否显示预览,不写默认为true
  dropZoneEnabled : false,//是否显示拖拽区域,默认不写为true,但是会占用很大区域
  //minImageWidth: 50, //图片的最小宽度
  //minImageHeight: 50,//图片的最小高度
  //maxImageWidth: 1000,//图片的最大宽度
  //maxImageHeight: 1000,//图片的最大高度
  //maxFileSize: 0,//单位为kb,如果为0表示不限制文件大小
  //minFileCount: 0,
  maxFileCount : 1, //表示允许同时上传的最大文件个数
  enctype : 'multipart/form-data',
  validateInitialCount : true,
  previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",
  msgFilesTooMany : "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
  allowedFileTypes : [ 'image' ],//配置允许文件上传的类型
  allowedPreviewTypes : [ 'image' ],//配置所有的被预览文件类型
  allowedPreviewMimeTypes : [ 'jpg', 'png', 'gif' ],//控制被预览的所有mime类型
  language : 'zh'
 })
 //异步上传返回结果处理
 $('.myfile').on('fileerror', function(event, data, msg) {
  console.log("fileerror");
  console.log(data);
 });
 //异步上传返回结果处理
 $(".myfile").on("fileuploaded", function(event, data, previewId, index) {
  console.log("fileuploaded");
  var ref = $(this).attr("data-ref");
  $("input[name='" + ref + "']").val(data.response.url);
 });
 //同步上传错误处理
 $('.myfile').on('filebatchuploaderror', function(event, data, msg) {
  console.log("filebatchuploaderror");
  console.log(data);
 });
 //同步上传返回结果处理
 $(".myfile").on("filebatchuploadsuccess",
   function(event, data, previewId, index) {
    console.log("filebatchuploadsuccess");
    console.log(data);
   });
 //上传前
 $('.myfile').on('filepreupload', function(event, data, previewId, index) {
  console.log("filepreupload");
 });
</script>

配置tomcat的虚拟路径

如题,本次图片上传是要上传到服务器上别的磁盘位置,比如我的电脑作为服务器来说,一般情况下用tomcat上传图片只能上传到项目的某文件夹中,所以这里我们需要配置tomcat来打开tomcat的虚拟路径,让tomcat可以映射到本地磁盘的路径上。操作如下图:

bootstrap fileinput组件整合Springmvc上传图片到本地磁盘

1.双击这里

2.点击我画圈的地方

bootstrap fileinput组件整合Springmvc上传图片到本地磁盘

3.配置tomcat的虚拟路径

bootstrap fileinput组件整合Springmvc上传图片到本地磁盘

path:也就是我们tomcat的虚拟访问路径,Documnet Base是我们实际本地磁盘需要被映射的路径。

SpringMVC的Controller层编写

@Controller
@RequestMapping("/food")
public class PictureController {
 // uploadFile
 @RequestMapping("/uploadFile")
 @ResponseBody
 public Map<String, Object> uploadFile(MultipartFile myfile)
   throws IllegalStateException, IOException {
  // 原始名称
  String oldFileName = myfile.getOriginalFilename(); // 获取上传文件的原名
//  System.out.println(oldFileName);
  // 存储图片的虚拟本地路径(这里需要配置tomcat的web模块路径,双击猫进行配置)
  String saveFilePath = "E://picture";
  // 上传图片
  if (myfile != null && oldFileName != null && oldFileName.length() > 0) {
   // 新的图片名称
   String newFileName = UUID.randomUUID() + oldFileName.substring(oldFileName.lastIndexOf("."));
   // 新图片
   File newFile = new File(saveFilePath + "\\" + newFileName);
   // 将内存中的数据写入磁盘
   myfile.transferTo(newFile);
   // 将新图片名称返回到前端
   Map<String, Object> map = new HashMap<String, Object>();
   map.put("success", "成功啦");
   map.put("url", newFileName);
   return map;
  } else {
   Map<String, Object> map = new HashMap<String, Object>();
   map.put("error", "图片不合法");
   return map;
  }
 }
}

写完后直接访问Controller层配置的路径,即可成功,最终效果如前面的效果图一样。

以上所述是小编给大家介绍的bootstrap fileinput组件整合Springmvc上传图片到本地磁盘,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
用队列模拟jquery的动画算法实例
Jan 20 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 Javascript
Vue实现购物车场景下的应用
Nov 27 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
在vue-cli搭建的项目中增加后台mock接口的方法
Apr 26 Javascript
详解nuxt sass全局变量(公共scss解决方案)
Jun 27 Javascript
微信小程序修改checkbox的样式代码实例
Jan 21 Javascript
vue实现简单跑马灯效果
May 25 Javascript
javascript函数式编程基础
Sep 15 Javascript
微信小程序 刷新上拉下拉不会断详细介绍
May 11 #Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 #Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 #Javascript
jQuery zTree树插件动态加载实例代码
May 11 #jQuery
微信小程序中使用javascript 回调函数
May 11 #Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 #Javascript
JS使用插件cryptojs进行加密解密数据实例
May 11 #Javascript
You might like
PHP获取表单所有复选框的值的方法
2014/08/28 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
Angular的事件和表单详解
2016/12/26 Javascript
DWR3 访问WEB元素的两种方法实例详解
2017/01/03 Javascript
微信小程序通过api接口将json数据展现到小程序示例
2017/01/20 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
layui树形菜单动态遍历的例子
2019/09/23 Javascript
Vue中this.$nextTick的作用及用法
2020/02/04 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
使用Protocol Buffers的C语言拓展提速Python程序的示例
2015/04/16 Python
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
Python计算三维矢量幅度的方法
2015/06/15 Python
Python实现从log日志中提取ip的方法【正则提取】
2018/03/31 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
python plotly画柱状图代码实例
2019/12/13 Python
Python实现点云投影到平面显示
2020/01/18 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
10张动图学会python循环与递归问题
2021/02/06 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
应届生高等护理求职信
2013/10/12 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
2014年后备干部工作总结
2014/12/08 职场文书
pytorch 如何使用amp进行混合精度训练
2021/05/24 Python
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL
Java 异步任务计算FutureTask
2022/04/28 Java/Android