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 相关文章推荐
让iframe自适应高度(支持XHTML,支持FF)
Jul 24 Javascript
“不能执行已释放的Script代码”错误的原因及解决办法
Sep 09 Javascript
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
Dec 02 Javascript
修改jquery.lazyload.js实现页面延迟载入
Dec 22 Javascript
让你的CSS像Jquery一样做筛选的实现方法
Jul 10 Javascript
一个js控制的导航菜单实例代码
Dec 03 Javascript
jQuery实现级联菜单效果(仿淘宝首页菜单动画)
Apr 10 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
Mar 31 Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 Javascript
jQuery与JS加载事件用法分析
Sep 04 Javascript
从组件封装看Vue的作用域插槽的实现
Feb 12 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 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的sprintf函数的用法 控制浮点数格式
2014/02/14 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
一个完整的PHP类包含的七种语法说明
2015/06/04 PHP
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
Js sort排序使用方法
2011/10/17 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
2014/10/11 Javascript
AngularJS基础知识
2014/12/21 Javascript
jQuery中:hidden选择器用法实例
2014/12/30 Javascript
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
vue 点击按钮增加一行的方法
2018/09/07 Javascript
详解js中Array的方法及技巧
2018/09/12 Javascript
微信小程序实现笑脸评分功能
2018/11/03 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
20个常用Python运维库和模块
2018/02/12 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
在pytorch中实现只让指定变量向后传播梯度
2020/02/29 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
sealed修饰符是干什么的
2012/10/23 面试题
优秀导游先进事迹材料
2014/01/25 职场文书
竞选文艺委员演讲稿
2014/04/28 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
机关作风建设心得体会
2014/10/22 职场文书
教师专业技术工作总结2015
2015/05/13 职场文书
演讲稿:​快乐,从不抱怨开始!
2019/04/02 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
常用的Python代码调试工具总结
2021/06/23 Python