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 相关文章推荐
javascript 表单的友好用户体现
Jan 07 Javascript
jQuery对象和DOM对象的相互转化实现代码
Mar 02 Javascript
web基于浏览器的本地存储方法应用
Nov 27 Javascript
浅述Javascript的外部对象
Dec 07 Javascript
jquery对象与DOM对象转化
Feb 08 Javascript
微信小程序实现流程进度的图样式功能
Jan 16 Javascript
vue组件挂载到全局方法的示例代码
Aug 02 Javascript
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 Javascript
electron-vue开发环境内存泄漏问题汇总
Oct 10 Javascript
Vue实现导航栏的显示开关控制
Nov 01 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
Nov 04 Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 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
基于mysql的bbs设计(四)
2006/10/09 PHP
用PHP写的基于Memcache的Queue实现代码
2011/11/27 PHP
PHP实现按之字形顺序打印二叉树的方法
2018/01/16 PHP
PHP抽象类和接口用法实例详解
2019/07/20 PHP
JavaScript入门教程(11) js事件处理
2009/01/31 Javascript
JavaScript 新手24条实用建议[TUTS+]
2009/06/21 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
Google 静态地图API实现代码
2010/11/19 Javascript
读jQuery之九 一些瑕疵说明
2011/06/21 Javascript
如何使用jquery动态加载js,css文件实现代码
2013/04/03 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
5种处理js跨域问题方法汇总
2014/12/04 Javascript
js 左右悬浮对联广告代码示例
2014/12/12 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
详解Vue双向数据绑定原理解析
2017/09/11 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
基于js判断浏览器是否支持webGL
2020/04/18 Javascript
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
利用Python中的pandas库对cdn日志进行分析详解
2017/03/07 Python
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
Python3非对称加密算法RSA实例详解
2018/12/06 Python
Python数据可视化库seaborn的使用总结
2019/01/15 Python
Python实现连接MySql数据库及增删改查操作详解
2019/04/16 Python
python 实现批量替换文本中的某部分内容
2019/12/13 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
Prometheus开发中间件Exporter过程详解
2020/11/30 Python
解决pytorch 模型复制的一些问题
2021/03/03 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
房产继承公证书
2014/04/09 职场文书
建筑节能汇报材料
2014/08/22 职场文书
在职证明书模板
2015/06/15 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
JavaScript展开运算符和剩余运算符的区别详解
2022/02/18 Javascript