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 相关文章推荐
常用的jQuery前端技巧收集
Dec 24 Javascript
自己动手写的javascript前端等待控件
Oct 30 Javascript
js实现文件上传表单域美化特效
Nov 02 Javascript
基于javascript实现图片切换效果
Apr 17 Javascript
浅析Bootstrap组件之面板组件
May 04 Javascript
AngularJs Modules详解及示例代码
Sep 01 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 Javascript
详解从vue-loader源码分析CSS Scoped的实现
Sep 23 Javascript
JavaScript中变量提升机制示例详解
Dec 27 Javascript
js里面的变量范围分享
Jul 18 Javascript
js实现金山打字通小游戏
Jul 24 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
用PHP连接Oracle数据库
2006/10/09 PHP
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
浅析php数据类型转换
2014/01/09 PHP
php创建图像具体步骤
2017/03/13 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
Laravel框架中集成MongoDB和使用详解
2019/10/17 PHP
学习YUI.Ext 第七天--关于View&amp;JSONView
2007/03/10 Javascript
利用JQuery+EasyDrag 实现弹出可拖动的Div,同时向Div传值,然后返回Div选中的值
2009/10/24 Javascript
javascript hasFocus使用实例
2010/06/29 Javascript
javascript学习笔记(八) js内置对象
2012/06/19 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
解析JSON对象与字符串之间的相互转换
2013/12/18 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
jQuery实现大图轮播
2017/02/13 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
在Python中操作列表之List.pop()方法的使用
2015/05/21 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
python 正确保留多位小数的实例
2018/07/16 Python
Python函数装饰器实现方法详解
2018/12/22 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
Python自动化导出zabbix数据并发邮件脚本
2019/08/16 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
python 模拟登录B站的示例代码
2020/12/15 Python
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
大学生就业推荐表自我评价
2015/03/02 职场文书
签证扫盲贴,41个常见签证知识,需要的拿走
2019/08/09 职场文书
redis配置文件中常用配置详解
2021/04/14 Redis
学会Python数据可视化必须尝试这7个库
2021/06/16 Python
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python