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

整合前的准备步骤

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

2.下载bootstrap fileinput组件源码:

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

搭建后的效果图

图1.

这里写图片描述

图2.

这里写图片描述

图3.

这里写图片描述

图4.

这里写图片描述

图5.

这里写图片描述

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

本工程的路径界面如下:

这里写图片描述

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

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

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

<form role="form" method="post" action="<%=basePath%>addArticle" enctype="multipart/form-data"> <div> <label>菜谱名称</label> <div> <input type="text" placeholder="菜谱名称"> </div> </div> <div> <label>菜谱封面</label> <div> <input type="file" data-ref="url2" value="" /> <input type="hidden" 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></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的虚拟路径

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wysxyw.html