关键词:
实现上传图片功能在Springmvc中很好实现。现在我将会展现完整例子。
开始需要在pom.xml加入几个jar,分别是:
- <dependency>
- <groupId>commons-fileupload</groupId>
- <artifactId>commons-fileupload</artifactId>
- <version>1.3.1</version>
- </dependency>
- <dependency>
- <groupId>commons-io</groupId>
- <artifactId>commons-io</artifactId>
- <version>2.4</version>
- </dependency>
接下来,在Springmvc的配置加入上传文件的配置(PS:我把springmvc的完整配置都展现出来):
- <!--默认的mvc注解映射的支持 -->
- <mvc:annotation-driven/>
- <!-- 处理对静态资源的请求 -->
- <mvc:resources location="/static/" mapping="/static/**" />
- <!-- 扫描注解 -->
- <context:component-scan base-package="com.ztz.springmvc.controller"/>
- <!-- 视图解析器 -->
- <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
- <property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>
- <!-- 前缀 -->
- <property name="prefix" value="/WEB-INF/jsp/"/>
- <!-- 后缀 -->
- <property name="suffix" value=".jsp"/>
- </bean>
- <!-- 上传文件 -->
- <bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
- <property name="defaultEncoding" value="utf-8"/>
- <!-- 最大内存大小 -->
- <property name="maxInMemorySize" value="10240"/>
- <!-- 最大文件大小,-1为不限制大小 -->
- <property name="maxUploadSize" value="-1"/>
- </bean>
一、 单文件上传
当然在一个表单中,需要添加enctype="multipart/form-data",一个表单有文件域,肯定也有基本的文本框,可以一次性提交,springmvc能给我们区别出来,来做不同的处理。首先看下普通的model
- package com.ztz.springmvc.model;
- public class Users {
- private String name;
- private String password;
- //省略get set方法
- //重写toString()方便测试
- @Override
- public String toString() {
- return "Users [name=" + name + ", password=" + password + "]";
- }
- }
这个是表单的JSP页面:
- <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
- <%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
- <%
- String path = request.getContextPath();
- String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
- request.setAttribute("basePath", basePath);
- %>
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>FileUpload</title>
- </head>
- <body>
- <form action="${basePath}file/upload" method="post" enctype="multipart/form-data">
- <label>用户名:</label><input type="text" name="name"/><br/>
- <label>密 码:</label><input type="password" name="password"/><br/>
- <label>头 像</label><input type="file" name="file"/><br/>
- <input type="submit" value="提 交"/>
- </form>
- </body>
- </html>
上传成功跳转的JSP页面,并且显示出上传图片:
- <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
- <%@taglib prefix="c" uri="http://java.sun.com/jstl/core_rt" %>
- <%
- String path = request.getContextPath();
- String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
- request.setAttribute("basePath", basePath);
- %>
- <!DOCTYPE html>
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>头像</title>
- </head>
- <body>
- <img src="${basePath}${imagesPath}">
- </body>
- </html>
最后是Controller:
- package com.ztz.springmvc.controller;
- import java.io.File;
- import java.util.UUID;
- import javax.servlet.http.HttpServletRequest;
- import org.springframework.stereotype.Controller;
- import org.springframework.web.bind.annotation.RequestMapping;
- import org.springframework.web.bind.annotation.RequestMethod;
- import org.springframework.web.bind.annotation.RequestParam;
- import org.springframework.web.multipart.MultipartFile;
- import com.ztz.springmvc.model.Users;
- @Controller
- @RequestMapping("/file")
- public class FileUploadController {
- @RequestMapping(value="/upload",method=RequestMethod.POST)
- private String fildUpload(Users users ,@RequestParam(value="file",required=false) MultipartFile file,
- HttpServletRequest request)throws Exception{
- //基本表单
- System.out.println(users.toString());
- //获得物理路径webapp所在路径
- String pathRoot = request.getSession().getServletContext().getRealPath("");
- String path="";
- if(!file.isEmpty()){
- //生成uuid作为文件名称
- String uuid = UUID.randomUUID().toString().replaceAll("-","");
- //获得文件类型(可以判断如果不是图片,禁止上传)
- String contentType=file.getContentType();
- //获得文件后缀名称
- String imageName=contentType.substring(contentType.indexOf("/")+1);
- path="/static/images/"+uuid+"."+imageName;
- file.transferTo(new File(pathRoot+path));
- }
- System.out.println(path);
- request.setAttribute("imagesPath", path);
- return "success";
- }
- //因为我的JSP在WEB-INF目录下面,浏览器无法直接访问
- @RequestMapping(value="/forward")
- private String forward(){
- return "index";
- }
- }
点击提交控制台输出:
Users [name=fileupload, password=test]
浏览器显示结果:
二、 多图片上传
springmvc实现多图片上传也很简单,我们把刚才的例子修改下,在加一个文件域,name的值还是相同
- <body>
- <form action="${basePath}file/upload" method="post" enctype="multipart/form-data">
- <label>用户名:</label><input type="text" name="name"/><br/>
- <label>密 码:</label><input type="password" name="password"/><br/>
- <label>头 像1</label><input type="file" name="file"/><br/>
- <label>头 像2</label><input type="file" name="file"/><br/>
- <input type="submit" value="提 交"/>
- </form>
- </body>
展示图片来个循环,以便显示多张图片
- <body>
- <c:forEach items="${imagesPathList}" var="image">
- <img src="${basePath}${image}"><br/>
- </c:forEach>
- </body>
控制层代码如下:
- package com.ztz.springmvc.controller;
- import java.io.File;
- import java.util.ArrayList;
- import java.util.List;
- import java.util.UUID;
- import javax.servlet.http.HttpServletRequest;
- import org.springframework.stereotype.Controller;
- import org.springframework.web.bind.annotation.RequestMapping;
- import org.springframework.web.bind.annotation.RequestMethod;
- import org.springframework.web.bind.annotation.RequestParam;
- import org.springframework.web.multipart.MultipartFile;
- import com.ztz.springmvc.model.Users;
- @Controller
- @RequestMapping("/file")
- public class FileUploadController {
- @RequestMapping(value="/upload",method=RequestMethod.POST)
- private String fildUpload(Users users ,@RequestParam(value="file",required=false) MultipartFile[] file,
- HttpServletRequest request)throws Exception{
- //基本表单
- System.out.println(users.toString());
- //获得物理路径webapp所在路径
- String pathRoot = request.getSession().getServletContext().getRealPath("");
- String path="";
- List<String> listImagePath=new ArrayList<String>();
- for (MultipartFile mf : file) {
- if(!mf.isEmpty()){
- //生成uuid作为文件名称
- String uuid = UUID.randomUUID().toString().replaceAll("-","");
- //获得文件类型(可以判断如果不是图片,禁止上传)
- String contentType=mf.getContentType();
- //获得文件后缀名称
- String imageName=contentType.substring(contentType.indexOf("/")+1);
- path="/static/images/"+uuid+"."+imageName;
- mf.transferTo(new File(pathRoot+path));
- listImagePath.add(path);
- }
- }
- System.out.println(path);
- request.setAttribute("imagesPathList", listImagePath);
- return "success";
- }
- //因为我的JSP在WEB-INF目录下面,浏览器无法直接访问
- @RequestMapping(value="/forward")
- private String forward(){
- return "index";
- }
- }
ssm框架实现图片上传显示并保存地址到数据库(代码片段)
本案例是通过springmvc+spring+mybatis框架以商品上传为例,实现的图片上传功能,并把图片的地址保存到数据库并在前台显示上传的图片。本项目是使用maven搭建的项目,首先看下项目结构相关配置自行搜索,下边直接实现上传功能1... 查看详情
利用springmvc上传图片文件
...使用struts的上传功能,但因为项目并没有使用struts,而是springmvc,最后不得不另寻它路。通过google和百度,看到了一些相关的介绍。经过自己的偿试,最终搞定利用springmvc上传文件的功能,完成图片的上传。如果只是为了上 查看详情
springboot实现多图片上传并回显,涨姿势了~(代码片段)
...便后续查看。上传Controller的代码非常简单,由于用了SpringMVC 查看详情
移动端h5实现拍照上传图片并预览
.移动端实现图片上传并预览,用到h5的input的file属性及filereader对象;经测除了android上不支持多图片上传,其他基本ok实用;一:先说一下单张图片上传(先上代码):html结构(含多张图片容器div):1<divclass="fileBtn">2<p>点... 查看详情
ssm框架之文件上传
...图片的路径) 数据库只需要保存该路径即可。3.springmvc是支持文件上传的 在springMVC中配置文件上传,并限制文件上传的大小 这里一定要配置ID,并且ID的名字是固定的:multipartresolver4.后台如何... 查看详情
将图片上传到 Firebase 存储并显示为个人资料图片
】将图片上传到Firebase存储并显示为个人资料图片【英文标题】:UploadimagetoFirebaseStorageandshowasProfileImage【发布时间】:2019-10-1718:12:36【问题描述】:我在将图片上传到Firebase存储方面需要帮助。我的应用程序中有一个配置文件菜... 查看详情
多张图片上传并压缩
前面已经写了单张图片上传压缩的文章,这里简单拓展下多张图片的,思路还是一样的,只不过多了一些循环,所以不多赘述,直接贴代码。dom结构如下:<labelfor="imgFile">请上传图片:</label><inputid="imgFile"type="file"multip... 查看详情
java上传图片并压缩图片大小
Thumbnailator是一个优秀的图片处理的Google开源Java类库。处理效果远比JavaAPI的好。从API提供现有的图像文件和图像对象的类中简化了处理过程,两三行代码就能够从现有图片生成处理后的图片,且允许微调图片的生成方式,同时保... 查看详情
使用carrierwave在云端上传并显示多张图片
】使用carrierwave在云端上传并显示多张图片【英文标题】:uploadandshowmultipleimagesincloudinaryusingcarrierwave【发布时间】:2018-06-1903:31:23【问题描述】:我有一个如下的表单域,通过它我可以一次添加多个图像。我正在使用active-admingem... 查看详情
js实现input上传图片并显示缩略图
用这个方法就可以很方便快捷的实现上传图片并显示缩略图的效果:FileReader的readAsDataURL()先创建一个img标签,再用fileReader把input文件的赋值到img的src即可具体代码如下:functionpreviewFile(){varpreview=document.querySelector(‘img‘);varfile=do... 查看详情
juincenweb中图片上传处理jquery+ajax+springmvc
今天做项目有个需求,页面上需要上传一个图片,之前解决了一次,没有记下来。在前台用户先选择一张图片,然后可以预览,再上传,我是这样解决的。预览:html里面有一个普通的input标签,id:uploadFile<inputtype="file"id="upload... 查看详情
图片上传及显示(包含多文件)
前一段时间用到文件上传,好久没有写这个东西,有的东西也忘记了。所以本篇博客BZ决定记载一下,一方面自己回顾加深一下,另一方面供各位程序员学习。希望大神们对本文不对的地方进行批评指正!先在我们的html页面... 查看详情
如何实现springmvc图片上传时,图片如何代替进度条?
参考技术A不是用图片代替进度条吧,应该可以用个div加点样式,根据进度调整宽度呀。哈哈个人愚见。追问呵呵,是用动态图片代替进度条。追答用一个图片不行么修改图片的长度呀。动态修改长度就是了赛。 查看详情
springmvc图片的上传和下载(代码片段)
...专栏:国学周更-心性养成之路🥭本文内容:SpringMVC图片的上传和下载文章目录序言思路一:浏览器图片的上传下载显示通过本地实现1、图片上传功能2、图片下载功能思路二:浏览器图片的上传下载显示通过... 查看详情
基于vue选择上传图片并在页面显示(图片可删除)
demo例子: 依赖文件: http://files.cnblogs.com/files/zhengweijie/jquery.form.rar HTML文本内容: <template><divid="accident"><divclass="wrapper"><iclass="i 查看详情
基于vue选择上传图片并在页面显示(图片可删除)
demo例子: 依赖文件: http://files.cnblogs.com/files/zhengweijie/jquery.form.rar HTML文本内容: <template><divid="accident"><divclass="wrapper"><iclass="i 查看详情
javaweb中上传图片并显示图片,用我要上传课程信息(里面包括照片)这个例子说明
原理: 从客户端上传到服务器 照片——文件夹——数据库例如:桌面一张照片,在tomacat里创建upload文件夹,把桌面照片上传到upload文件夹里,... 查看详情
各种图片格式的特点
图片的格式 -JPEG(jpg) -支持的颜色多,不支持透明,可以压缩 -一般显示颜色丰富的图片时可以使用JPEG,例如:照片 -GIF(gif) -支持的颜色少,支持简单的透明,支持动态图 -一般显示单一颜色的图片(网站的logo)... 查看详情