。

而在实际开发中#xff0c;很多情况下上传后不进行跳转#xff0c;而是进行页面的局部刷新#xff0c;比如#xff1a;上传头像成功后将头像显示在网页中。

这时候就需要使用异步文件上传。

1.1

之前的上传方案在上传成功后都会跳转页面。

而在实际开发中很多情况下上传后不进行跳转而是进行页面的局部刷新比如上传头像成功后将头像显示在网页中。

这时候就需要使用异步文件上传。

1.1

编写JSP页面引入jQuery和jQuery表单上传工具jquery.form.js【该js文件已经上传到我的资源有需要的小伙伴可以自行下载】

upload4.jsp

contentTypetext/html;charsetUTF-8

languagejava

src/js/jquery-2.1.1.min.js/scriptscript

/head

enctypemultipart/form-datainput

typefile

异步提交表单$(#ajaxForm).ajaxSubmit({url:

/fileUpload4,type:

data);console.log(data);}})})})/script

/form

接收异步上传请求RequestMapping(/fileUpload4)//

String

request.getSession().getServletContext().getRealPath(/upload);File

dir

File(realPath);if(!dir.exists()){dir.mkdirs();}//

拿到上传文件名String

file.getOriginalFilename();filename

创建空文件File

将上传的文件写到空文件中file.transferTo(newFile);System.out.println(/upload/filename);return

/upload/filename;}

访问路径http://localhost:8080/upload4.jsp

OK我们可以看得出来确实只刷新了头像那一部分的页面。

本次案例成功实现

二、跨服务器上传

由于文件占据磁盘空间较大在实际开发中往往会将文件上传到其他服务器中此时需要使用跨服务器上传文件。

2.1

解压tomcat作为图片服务器在tomcat的webapps下创建upload。

conf/web.xml

param-namereadonly/param-nameparam-valuefalse/param-value

/init-param

protocolHTTP/1.1connectionTimeout20000

redirectPort8443

contentTypetext/html;charsetUTF-8

languagejava

src/js/jquery-2.1.1.min.js/scriptscript

/head

enctypemultipart/form-datainput

typefile

异步提交表单$(#ajaxForm).ajaxSubmit({url:

/fileUpload5,type:

data);console.log(data);}})})})/script

/form

--dependencygroupIdcom.sun.jersey/groupIdartifactIdjersey-core/artifactIdversion1.18.1/version/dependencydependencygroupIdcom.sun.jersey/groupIdartifactIdjersey-client/artifactIdversion1.18.1/version

2.4

创建控制器方法该方法在接受到上传请求后将文件保存到其他服务器上。

该方法接收到上传请求后将文件保存到其他服务器上RequestMapping(/fileUpload5)ResponseBodypublic

String

http://localhost:8081/upload/;//

filename

file.getOriginalFilename();filename

跨服上传//

client.resource(pathfilename);//

3.传输数据resource.put(file.getBytes());System.out.println(pathfilename);return

pathfilename;}

访问路径http://localhost:8080/upload5.jsp

可以看得到确实成功上传到了服务器上面的upload下的图片并跳转到下载页面

查询可下载的文件RequestMapping(/showFiles)public

String

showFileDown(HttpServletRequest

request,

1.获取下载文件路径集合。

注跨服务器上传中网络路径无法获取文件列表。

String

path

request.getSession().getServletContext().getRealPath(/upload);File

file

2.将路径放入模型中跳转到JSP页面model.addAttribute(files,files);return

download;}

--dependencygroupIdorg.apache.taglibs/groupIdartifactIdtaglibs-standard-spec/artifactIdversion1.2.5/version/dependencydependencygroupIdorg.apache.taglibs/groupIdartifactIdtaglibs-standard-impl/artifactIdversion1.2.5/version/dependency

3.3

urihttp://java.sun.com/jsp/jstl/core

page

contentTypetext/html;charsetUTF-8

languagejava

href/download?fileName${file}${file}/abr/

/c:forEach

文件下载RequestMapping(/download)public

void

设置响应头response.setHeader(Content-Disposition,attachment;filenamefileName);//

获取文件路径String

request.getSession().getServletContext().getRealPath(/upload);File

file

使用输出流写出文件os.write(FileUtils.readFileToByteArray(file));os.flush();os.close();}

3.5

OK我们先来访问http://localhost:8080/showFiles

查询出所有可以下载的文件然后点击下载也是可以成功下载文件的上传和下载就学习到这里了。

往期专栏文章相关导读

大家如果对于本期内容有什么不了解的话也可以去看看往期的内容下面列出了博主往期精心制作的MavenMybatis等专栏系列文章走过路过不要错过哎如果对您有所帮助的话就点点赞收藏一下啪。

其中Spring专栏有些正在更所以无法查看但是当博主全部更完之后就可以看啦。

Maven系列专栏文章

Maven系列专栏Maven工程开发Maven聚合开发【实例详解---5555字】

Mybatis系列专栏文章

Mybatis系列专栏MyBatis入门配置Mybatis入门案例【超详细】MyBatis配置文件

相关标签详解Mybatis模糊查询——三种定义参数方法和聚合查询、主键回填Mybatis动态SQL查询

--附实战案例--8888个字--88质量分Mybatis分页查询——四种传参方式Mybatis一级缓存和二级缓存带测试方法Mybatis分解式查询Mybatis关联查询【附实战案例】MyBatis注解开发---实现增删查改和动态SQLMyBatis注解开发---实现自定义映射关系和关联查询

Spring系列专栏文章

入门简介【自定义容器实例】IOC使用Spring实现附实例详解Spring

IOC之对象的创建方式、策略及销毁时机和生命周期且获取方式Spring

IOC相关注解运用——上篇Spring

AOP简介及相关案例注解、原生Spring、SchemaBased三种方式实现AOP【附详细案例】Spring事务简介及相关案例Spring

Spring

MVC各种参数获取及获取方式自定义类型转换器和编码过滤器Spring

MVC处理响应附案例详解Spring

MVC异常处理【单个控制异常处理器、全局异常处理器、自定义异常处理器】Spring

MVC拦截器和跨域请求SSM整合案例【C站讲解最详细流程的案例】