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 相关文章推荐
JS预览图像将本地图片显示到浏览器上
Aug 25 Javascript
javascript中的this详解
Dec 08 Javascript
实例详解jQuery表单验证插件validate
Jan 18 Javascript
jQuery实现只允许输入数字和小数点的方法
Mar 02 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
Javascript中return的使用与闭包详解
Jan 11 Javascript
JavaScript实现分页效果
Mar 28 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
基于jquery.page.js实现分页效果
Jan 01 jQuery
angular2/ionic2 实现搜索结果中的搜索关键字高亮的示例
Aug 17 Javascript
JavaScript使用递归和循环实现阶乘的实例代码
Aug 28 Javascript
Vue组件间数据传递的方式(3种)
Jul 13 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
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
Codeigniter通过SimpleXML将xml转换成对象的方法
2015/03/19 PHP
PHP生成唯一订单号
2015/07/05 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
ext实现完整的登录代码
2008/08/08 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
JavaScript DOM事件(笔记)
2015/04/08 Javascript
Bootstrap导航栏各元素操作方法(表单、按钮、文本)
2015/12/28 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
js实现文字列表无缝滚动效果
2017/06/23 Javascript
微信小程序之页面拦截器的示例代码
2017/09/07 Javascript
如何在vue中使用ts的示例代码
2018/02/28 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
对angularJs中$sce服务安全显示html文本的实例
2018/09/30 Javascript
浅析Vue下的components模板使用及应用
2019/11/27 Javascript
Python文件读取的3种方法及路径转义
2015/06/21 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
Django使用HttpResponse返回图片并显示的方法
2018/05/22 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
Django ModelForm操作及验证方式
2020/03/30 Python
python中return不返回值的问题解析
2020/07/22 Python
Python getsizeof()和getsize()区分详解
2020/11/20 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
远东集团网络工程师面试题
2014/10/20 面试题
可口可乐广告词
2014/03/20 职场文书
校企合作协议书
2014/04/16 职场文书
廉政教育的心得体会
2014/09/01 职场文书
个人作风纪律整顿整改措施
2014/10/25 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
扩展多台相同的Web服务器
2021/04/01 Servers
人工智能深度学习OpenAI baselines的使用方法
2022/05/20 Python