bootstrap图片上传
2024-05-09 11:50:19
1、pom文件引入依赖
<dependency><groupId>commons-io</groupId><artifactId>commons-io</artifactId><version>2.5</version>
</dependency>
<dependency><groupId>commons-fileupload</groupId><artifactId>commons-fileupload</artifactId><version>1.3.3</version>
</dependency>2、引入js和css
<link rel="stylesheet" type="text/css" href="/libs/bootstrap_fileinput/css/fileinput.min.css">
<script src="/libs/bootstrap_fileinput/js/fileinput.min.js"></script>
<script src="/libs/bootstrap_fileinput/js/fileinput_locale_zh.js"></script>3、页面
<div class="card card-info"><div class="card-header"><h3 class="card-title">商品图片</h3></div><div class="card-body"><a href="" class="form-control" style="border:none;">下载模板</a><input type="file" name="reportFile" id="reportFile" multiple class="file-loading" /></div>
</div>
4、javascript初始化上传
jQuery(function($){//初始化图片上传 参数1:控件id、参数2:上传地址initFileInput("reportFile", pt.base+"report/uploadReport");});//初始化fileinput控件（第一次初始化）
function initFileInput(ctrlName, uploadUrl) {var control = $('#' + ctrlName);//初始化上传控件的样式control.fileinput({language: 'zh', //设置语言uploadUrl: uploadUrl, //上传的地址allowedFileExtensions: ['jpg', 'gif', 'png', 'pdf'], //接收的文件后缀showUpload: true, //是否显示上传按钮showRemove : true, //显示移除按钮showPreview : true, //是否显示预览showCaption: false, //是否显示标题browseClass: "btn btn-primary", //按钮样式uploadAsync: true, //默认异步上传//dropZoneEnabled: false, //是否显示拖拽区域//minImageWidth: 50, //图片的最小宽度//minImageHeight: 50, //图片的最小高度//maxImageWidth: 1000, //图片的最大宽度//maxImageHeight: 1000, //图片的最大高度//maxFileSize: 0, //单位为kb，如果为0表示不限制文件大小//minFileCount: 0,maxFileCount: 3, //表示允许同时上传的最大文件个数enctype: 'multipart/form-data',validateInitialCount:true,previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",uploadExtraData:function (previewId, index) { //传参var data = {"reportGroupId": $('#lbl_groupId').html(), //此处自定义传参};return data;}});//导入文件上传完成之后的事件control.on('fileuploaded', function(event, data, previewId, index){var response = data.response;$.each(response,function(id,path){//上传完毕，将文件名返回console.log("path:"+path.pathUrl);$("#form").append("<input class='imgClass' name='filePath' type='hidden' value='"+path.pathUrl+"'>");});});}
5、控制层
package com.st.project.controller;import org.apache.commons.io.FilenameUtils;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.util.*;import static com.st.project.common.DateUtil.getCurrentTime;/*** 文件上传Controller*/
@Controller
@RequestMapping("/report")
public class UploaderController {private static Logger logger= LoggerFactory.getLogger(UploaderController.class);@Value("${portals.upload.image.path}")private String imagePath; //图片存储路径private String userId="who"; //登陆用户@PostMapping("/uploadReport")@ResponseBodypublic List<Map<String,String>> upload(@RequestParam MultipartFile[] reportFile,HttpServletRequest request,HttpServletResponse response) throws IOException{String day = getCurrentTime("yyyyMMdd");//获取当前天String realPath =imagePath; //图片存储路径File file = new File(realPath);if (!file.exists()) {//文件夹不存在 创建文件夹file.mkdirs();}response.setContentType("text/plain; charset=UTF-8");List<Map<String,String>> list = new ArrayList<Map<String,String>>();String originalFilename = null;for(MultipartFile myfile : reportFile){Map<String,String> map = new HashMap<String,String>();if(myfile.isEmpty()){logger.info("请选择文件后上传!");return null;}else{originalFilename = myfile.getOriginalFilename();String extension =FilenameUtils.getExtension(originalFilename);if("jpg".equalsIgnoreCase(extension)||"png".equalsIgnoreCase(extension)){originalFilename=userId+"_"+System.currentTimeMillis()+"."+FilenameUtils.getExtension(originalFilename);try {myfile.transferTo(new File(realPath, originalFilename));//保存文件路径map.put("pathUrl",originalFilename);list.add(map);logger.info("load success " + request.getContextPath()+File.separator+"upload"+File.separator+day+File.separator+originalFilename);logger.info("leaving upload!");}catch (Exception e) {logger.info("文件[" + originalFilename + "]上传失败,堆栈轨迹如下");e.printStackTrace();logger.info("文件上传失败，请重试！！");return null;}}else{logger.info("load success 只支持jpg,png格式");}}}return list;}}
bootstrap图片上传相关推荐
- bootstrap 图片上传入门
Bootstrap 图片上传入门 导入图片上传 css js **下载地址 :**https://github.com/kartik-v/bootstrap-fileinput 这里我们先放一个 图片 ...
- bootstrap 图片上传框架
百度云盘:https://pan.baidu.com/s/1o7WEtLo 密码:dw88
- Bootstrap 3 : 图片上传预览 image upload preview
头部均为: <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel= ...
- 为什么手机上传图片这么慢 前端_解决BootStrap Fileinput手机图片上传显示旋转问题_心病_前端开发者...
最近因为项目需要用到了bootstrap fileinput的插件,在使用苹果手机上传图片预览时,发现图片方向和手机本地存储方向不一致问题.后来通过查询资料了解图片具有EXIF(Exchangeabl ...
- java多图片上传插件,Bootstrap中的fileinput 多图片上传及编辑功能
Bootstrap中的fileinput 多图片上传及编辑功能 2019-01-01 编程之家收集整理的这篇文章主要介绍了Bootstrap中的fileinput 多图片上传及编辑功能,编程之家小编觉 ...
- SpringSSM的教师管理系统--ajax版本，分页，图片上传，jsp页面使用bootstrap布局
项目的结构 maven的配置 pom.xml 文件 ](maven的配置 pom.xml 文件) <project xmlns="http://maven.apache.org/POM ...
- ASP.Net MVC3 图片上传详解（form.js,bootstrap）
图片上传的插件很多,但很多时候还是不能切合我们的需求,我这里给大家分享个我用一个form,file实现上传四张图片的小demo.完全是用jquery前后交互,没有用插件. 最终效果图如下: 玩过花田人 ...
- bootstrap summernote富文本编辑器图片上传干货分享
个人技术网站 欢迎关注 今天做后台的时候需要一个富文本编辑器组件,由于项目使用的是bootstrap,所以毫不犹豫的用上了summernote富文本编辑器.文档各大大牛已经整理出来了 但是图片上传到 ...
- Bootstrap框架----单张图片上传实现---Uploadify插件
框架搭建 我们在之前的文章中已经实现了 单张图片的上传,使用的是最基本的 File类型的input提交的方式,上传到远程静态资源器和七牛云. 之前的文章关注的地方 主要是后端,也就是图片上传保存到哪里 ...
最新文章
- 部署基于嵌入的机器学习模型的通用模式
- linux 处理 BOM头 ^M 方法
- Redis+分布式+设计模式+Spring全家桶+Dubbo阿里P8技术精选文档
- delphi 打印指定地点文件_2020年度电脑、打印机耗材及相关配件采购招标公告
- Luogu2114 [NOI2014]起床困难综合症 【位运算】
- Java Platform SE 8（Java™编程语言）
- [POJ3177]Redundant Paths（双联通）
- 如何查看google chrome 插件源码
- 【旧文章搬运】从XP到Win7看Windows对象管理的变化(概述)
- 什么是电磁兼容标准?IEC、EN、TC77、CISPR等的区别!
- 工业企业外购材料进项税额的会计处理
- Information Bottleneck 信息瓶颈
- t检验和u检验的差别
- 如何打造以人为本的移动游戏
- 人工智能面试总结：160个机器学习面试题，赶紧先考考自己！
- java项目实战-超市管理系统（三）页面设计源码
- 关于使用腾讯云HiFlow场景连接器每天提醒签到打卡
- FPGA数字信号处理（十一）ASK解调技术
- 同态算法FHEW笔记
- 基于嵌入式的无线条码扫描仪系统的设计