第八天 上传图片

于 2020-03-14 12:45:59 发布
阅读量245 收藏
点赞数
分类专栏： 企业项目实战
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44629340/article/details/104857767
版权

在 pom.xml导入架包

在这里插入图片描述

在spring-mvc.xml中配置图片上传

在这里插入图片描述

jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<!-- 页面meta -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>数据 - AdminLTE2定制版</title>
<meta name="description" content="AdminLTE2定制版">
<meta name="keywords" content="AdminLTE2定制版">

<!-- Tell the browser to be responsive to screen width -->
<meta
	content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
	name="viewport">


<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/ionicons/css/ionicons.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/iCheck/square/blue.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/morris/morris.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/datepicker/datepicker3.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.theme.default.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/select2/select2.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap-markdown/css/bootstrap-markdown.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/adminLTE/css/AdminLTE.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/adminLTE/css/skins/_all-skins.min.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/css/style.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.skinNice.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap-slider/slider.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.css">
</head>

<body class="hold-transition skin-purple sidebar-mini">

	<div class="wrapper">

		<!-- 页面头部 -->
		<jsp:include page="header.jsp"></jsp:include>
		<!-- 页面头部 /-->
		<!-- 导航侧栏 -->
		<jsp:include page="aside.jsp"></jsp:include>
		<!-- 导航侧栏 /-->

		<!-- 内容区域 -->
		<div class="content-wrapper">

			<!-- 内容头部 -->
			<section class="content-header">
			<h1>
				用户管理 <small>用户表单</small>
			</h1>
			<ol class="breadcrumb">
				<li><a href="#"><i
						class="fa fa-dashboard"></i> 首页</a></li>
				<li><a
					href="#">用户管理</a></li>
				<li class="active">用户表单</li>
			</ol>
			</section>
			<!-- 内容头部 /-->

			<form action="${pageContext.request.contextPath}/uploadController/upload.do"
				method="post" enctype="multipart/form-data"><!--支持图片上传-->
				<!-- 正文区域 -->
				<section class="content"> <!--产品信息-->

				<div class="panel panel-default">
					<div class="panel-heading">图片上传</div>
					<img src="/upload/${upload_file_path}" alt="123">
					<h2>${UPLOAD_PATH}${upload_file_path}</h2>
					<input type="file" name="myPic">
				</div>
					<input type="submit" name="submit" id="submit" value="提交">

<%--				<!--订单信息/--> <!--工具栏-->--%>
<%--				<div class="box-tools text-center">--%>
<%--					<button type="submit" class="btn bg-maroon">保存</button>--%>
<%--					<button type="button" class="btn bg-default"--%>
<%--						onclick="history.back(-1);">返回</button>--%>
<%--				</div>--%>
<%--				<!--工具栏/--> </section>--%>
<%--				<!-- 正文区域 /-->--%>
			</form>
		</div>
		<!-- 内容区域 /-->

		<!-- 底部导航 -->
		<footer class="main-footer">
		<div class="pull-right hidden-xs">
			<b>Version</b> 1.0.8
		</div>
		<strong>Copyright &copy; 2014-2017 <a
			href="http://www.itcast.cn">研究院研发部</a>.
		</strong> All rights reserved. </footer>
		<!-- 底部导航 /-->

	</div>


	<script
		src="${pageContext.request.contextPath}/plugins/jQuery/jquery-2.2.3.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/jQueryUI/jquery-ui.min.js"></script>
	<script>
		$.widget.bridge('uibutton', $.ui.button);
	</script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap/js/bootstrap.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/raphael/raphael-min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/morris/morris.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/sparkline/jquery.sparkline.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/knob/jquery.knob.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/daterangepicker/moment.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/daterangepicker/daterangepicker.zh-CN.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/datepicker/bootstrap-datepicker.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/slimScroll/jquery.slimscroll.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/fastclick/fastclick.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/iCheck/icheck.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/adminLTE/js/app.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/treeTable/jquery.treetable.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/select2/select2.full.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-wysihtml5/bootstrap-wysihtml5.zh-CN.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/bootstrap-markdown.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/locale/bootstrap-markdown.zh.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/markdown.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-markdown/js/to-markdown.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/ckeditor/ckeditor.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.date.extensions.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/input-mask/jquery.inputmask.extensions.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/datatables/jquery.dataTables.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/datatables/dataTables.bootstrap.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/chartjs/Chart.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.resize.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.pie.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/flot/jquery.flot.categories.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/ionslider/ion.rangeSlider.min.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-slider/bootstrap-slider.js"></script>
	<script
		src="${pageContext.request.contextPath}/plugins/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>

	<script>
		$(document).ready(function() {
			// 选择框
			$(".select2").select2();

			// WYSIHTML5编辑器
			$(".textarea").wysihtml5({
				locale : 'zh-CN'
			});
		});

		// 设置激活菜单
		function setSidebarActive(tagUri) {
			var liObj = $("#" + tagUri);
			if (liObj.length > 0) {
				liObj.parent().parent().addClass("active");
				liObj.addClass("active");
			}
		}
	</script>


</body>

</html>

编写uploadController控制层

package com.zhongruan.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.ModelAndView;

import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.UUID;

@Controller
@RequestMapping("/uploadController")
public class uploadController {
    private static final String UPLOAD_PATH = "G://upload/";
    // 如何实现参数的封装：上传的时候，如何给出判断或者验证
    //需要: CommonsMultipartResolver , 配置SpringMVC容器
    @RequestMapping("/upload.do")
    public ModelAndView upload(@RequestParam("myPic")MultipartFile myPic) throws IOException {

        //1、文件在服务器上的存储
        //生成新的文件名
        UUID rid = UUID.randomUUID();
        long uid = rid.getLeastSignificantBits();
        Date dNow = new Date( );
        SimpleDateFormat ft = new SimpleDateFormat ("yyyy-MM-dd");
        String date = ft.format(dNow);
        // 取出后缀名，进行字符串的拼接
        String filename = myPic.getOriginalFilename();
        String suffix = filename.substring(filename.lastIndexOf("."));
//        File file = new File(文件地址 文件名 后缀名)
        File file = new File(UPLOAD_PATH +date+uid+suffix);
        // throws 和 try .. catch 有什么区别
        myPic.transferTo(file);

        // 2、文件地址的回显
        ModelAndView mv = new ModelAndView();
        mv.addObject("upload_file_path",file.getName());
        mv.addObject("UPLOAD_PATH",UPLOAD_PATH);
        mv.setViewName("upload");
        //3、给出页面的跳转
        return mv;
    }
}

配置虚拟路径

如果图片所保存位置所在位置是在项目里的则不需要配置虚拟路径，但是因为这个是保存在本地中所以想要图片在网页中回显就需要配置虚拟路径，网页是动态的jsp。HTml则都不需要。
在这里插入图片描述
选择路径
在这里插入图片描述
使用时在jsp页面写的映射路径
在这里插入图片描述
上传图片编写完成

weixin_44629340
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
图片上传
TLIKE的博客
08-23 208
开发工具与关键技术：VS C# 作者： 谭智聪 撰写时间：2020年8月21日 上传图片： 我们先在项目中创建一个文件夹来专门保存图片的，因为图片占内存比较大，一般不选择直接保存到数据库中，而是先将图片保存到项目的文件夹中，然后再将保存到文件中的图片路径保存到数据库中。 1、 给img标签绑定双击事件 设置样式宽高 <img src="" id="userPicture" ondblclick="showImageSelectDialog()" style="width: 150px; heigh
Java Web(十)：AdminLTE(中文版)的使用
yu1755128147的博客
02-14 1万+
1、AdminLTE的简介 2、AdminLTE的下载 3、AdminLTE的简单使用
AdminLTE 入门教程
热门推荐
Jinming Su
04-01 13万+
注：由于最近要使用AdminLTE，文档只有英文的(而且并不是十分详细)，就写一个快速入门的 官网实例：https://www.almsaeedstudio.com/themes/AdminLTE/index2.html模板<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatib
AdminLTE2管理后台自定义
weixin_33936401的博客
05-21 615
项目中需要用到 AdminLTE 管理后台模板，所以，这里对后台进行一个简单的布局修改，然后结合后端语言进行快速开发一个管理后台。 一、示例后台布局 这个示例后台带了许多开箱即用的脚手架，我们项目中只需要简单的东东，所以，对这个后台的页面布局做一个简化处理，去掉不需要的东西。 二、简化后台 首先看下核心布局：The layout con...
用户操作-用户添加操作代码实现
Leon_Jinhai_Sun的博客
02-22 742
用户添加 用户添加页面 user-add.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www....
Android 仿微信选择图片，上传图片
03-08
本示例项目"Android 仿微信选择图片，上传图片"旨在帮助开发者实现类似的功能，让用户可以从手机相册中选取图片，并能上传到服务器。下面我们将详细探讨这一过程中的关键知识点。 1. **权限申请**： 在Android 6.0...
Java判断上传图片格式的实例代码
08-25
Java判断上传图片格式的实例代码 在本文中，我们将详细介绍Java判断上传图片格式的实例代码，主要讲解了如何使用Java来判断上传的图片格式。我们都知道，客户上传图片时，可能会将png的图片后缀名改为jpg，从而绕过...
java代码实现多张图片单张图片文件上传_DEMO_图片上传_
10-02
在Java编程环境中，图片上传功能是一项常见的需求，尤其在开发Web应用或移动应用时。本DEMO主要展示了如何实现单张或多张图片文件的上传功能。以下将详细讲解涉及的知识点。 1. **文件I/O操作**：在Java中，进行...
H5 上传图片 拍照 压缩图片
11-18
在H5应用中，用户经常需要上传图片，无论是从相册选择还是直接通过摄像头拍照。这个过程涉及到多个技术环节，包括捕获图像、压缩图片、转换数据格式以及将图片文件提交到服务器。以下是对这些知识点的详细解释： 1....
C#上传图片预览11111
04-17
8. 图片压缩：为了节省存储空间和提高上传速度，可以在用户上传图片前对其进行压缩。可以使用第三方库如ImageSharp或者System.Drawing来完成这个任务。 9. 图片存储：根据项目需求，可以选择将图片保存在文件系统、...
企业信息化项目IT规划.pptx
最新发布
08-07
企业信息化项目IT规划.pptx
[毕业设计]PHP论文评审与反馈系统(源代码+论文).zip
08-07
[毕业设计]PHP论文评审与反馈系统(源代码+论文)
毕业设计，基于ASP+SqlServer开发的工艺品展示系统，内含完整源代码，数据库，毕业论文
08-07
毕业设计，基于ASP+SqlServer开发的工艺品展示系统，内含完整源代码，数据库，毕业论文 工艺品在线展示系统主要功能模块包括首页、个人资料、公共管理、用户管理、工艺资讯、作品欣赏、作品类型,采取面对对象的开发模式进行软件的开发和硬体的架...
[毕业设计]PHP社区互动系统开发与研究（源码+论文+项目报告）.zip
08-07
[毕业设计]PHP社区互动系统开发与研究（源码+论文+项目报告）
H为-变更管理流程.ppt
08-07
H为-变更管理流程.ppt
精益班组长育成安全管理培训.pptx
08-07
精益班组长育成安全管理培训.pptx
【visual studio+opencv】车牌检测与字符分割项目工程
08-07
https://blog.csdn.net/weixin_65793825/article/details/140989039 按照上面博客中流程修改过的工程文件 亲测可运行
班组长管理能力提升培训.pptx
08-07
班组长管理能力提升培训.pptx
ASP.NET文件与图片上传处理详解
使用GDI+或第三方库如ImageMagick，根据原始图片的宽高比创建缩略图，保持图像比例不变。 8. **图片加水印**： - **文字水印**：利用Graphics类在图片上绘制文本。 - **图片水印**：将一个图片作为水印覆盖在原...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值