文档章节

ajax异步跨服上传图片

HoiCai
 HoiCai
发布于 2017/03/20 00:13
字数 677
阅读 26
收藏 0

环境配置

1.导入jar包

commos-io

commos-fileupload

jersey框架包

2.配置文件上传解析器

springmvc.xml

	<!-- 配置文件上传解析器 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver" >
	<!-- 设置文件上传最大容量5m -->
	<property name="maxUploadSize">
		<value>5242880</value>
	</property>
</bean>

注意:id一定要配置,底层通过id找解析器

3.创建新项目作为图片存储服务器

1.创建新tomcat服务器

2.修改端口

4.修改服务器写入权限

Serverts/Tomcat/web.xml

添加readonly:false

<servlet>
    <servlet-name>default</servlet-name>
    <servlet-class>org.apache.catalina.servlets.DefaultServlet</servlet-class>
    <init-param>
        <param-name>readonly</param-name>
        <param-value>false</param-value>
    </init-param>
</servlet>

页面编写

1.表单

<p><label></label>
	<img id='imgSize1ImgSrc' src='${picPath }${item.pic }'  height="100" width="100" />
	<input type='file' id='imgSize1File' name='imgSize1File' class="file" onchange='submitImgSize1Upload()' /><span class="pos" id="imgSize1FileSpan">请上传图片的大小不超过3MB</span>
    <input type='hidden' id='imgSize1' name='pic' value='${item.pic}' reg="^.+$" tip="亲!您忘记上传图片了。" />
</p>

2.定义ajax异步函数

2.1导入并引入js

jquery.js

jquery.form.js

注意导入顺序,先导入jQuery再导入jQuery.form

2.2使用ajax上传图片

function submitImgSize1Upload(){
//上传图片流程:把图片流对象,放入request
//图片对象在表单中,提交表单
//ajax提交表单:$.post()
var option = {
		type:'post',
		url:'${pageContext.request.contextPath }/uploadPic.do',
		dataType:'text',
		data:{
			fileName:'imgSize1File'
		},
		success:function(data){
			//把json格式字符串转换成对象
			var obj = $.parseJSON(data);
			//图片回显,把图片地址设置img标签即可,图片里面回显
			$("#imgSize1ImgSrc").attr("src",obj.fullPath);
			//给input隐藏域标签设置一个图片服务器地址,提交保存数据库
			$("#imgSize1").val(obj.fullPath);
		}
	};
	//提交表单
	$("#itemForm").ajaxSubmit(option);

}

上传控制类

1.获取名称及扩展名

2.定义随机文件名

3.使用jesery客户端上传图片

4.图片回显

@RequestMapping("/upload/uploadPic")
public void upload(HttpServletRequest request,String fileName,PrintWriter out){
	System.out.println("1");
	//把request转换成多部件请求对象
	MultipartHttpServletRequest mh = (MultipartHttpServletRequest)request;
	//根据文件name属性名称获取文件对象
	CommonsMultipartFile file = (CommonsMultipartFile) mh.getFile(fileName);
	//获取名称
	String originalFilename = file.getOriginalFilename();
	//截取获取文件扩展名
	String extName = originalFilename.substring(originalFilename.lastIndexOf("."));
	
	//使用毫秒+随机数定义文件名
	long currentTimeMillis = System.currentTimeMillis();
	//定义保存的文件名
	String fn = currentTimeMillis+"";
	//添加随机数
	Random random = new Random();
	for(int i =0 ;i < 4; i++){
		fn += random.nextInt(10);
	}
	//添加扩展名
	fn += extName;
	
	//上传文件
	//跨服务器上传文件,使用jesery客户端
	Client client = Client.create();
	//指定远程服务器绝对路径
	WebResource resource = client.resource(Constants.IMAGE_HOST+"upload/"+fn);
	//上传文件
	resource.put(String.class,file.getBytes());
	
	//图片回显
	//把远程图片服务图片地址返回给页面ajax解析
	//获得图片地址
	String fullPath = Constants.IMAGE_HOST+"upload/"+fn;
	//将地址封装到json中去
	String jsonResult = "{\"fullPath\":\""+fullPath+"\"}";
	//将jsonResult打印出去
	out.println(jsonResult);
}  

问题

描述:图片上传时 403返回异常

原因:tomcat默认禁止上传,readonly没有配置

解决:配置readonly为false

© 著作权归作者所有

HoiCai
粉丝 4
博文 30
码字总数 19923
作品 0
深圳
程序员
私信 提问
js/异步/跨域(文件服务器)/文件上传/大文件拆分上传,方案设计请教

需求: 通过js异步上传文件到文件服务器(跨域),并返回存放地址。 疑问点: 1. js异步文件上传实现方案 2. 文件过大,可能存在拆分上传问题 3. ajax跨域问题 4. 文件服务器,如何接受处理(...

蝴蝶和向日葵
2018/08/20
553
4
【初窥javascript奥秘之Ajax】简述下你所知道的Ajax?

前言 ajax已经流行很多年了,现在来说它是否已经晚了呢???特别是有这样框架那样框架后,还有几个人认识原生ajax呢?我们每天都会用到的东西你到底对他了解吗? 在最近一次面试上不幸被问到...

范大脚脚
2017/12/14
0
0
试图做前后端分离项目遇到的困难

先分享两个前后端分离的技术文章。 Web应用的组件化开发 http://blog.xufei.gitpress.org/~posts/2013-11-20-Web%E5%BA%94%E7%94%A8%E7%9A%84%E7%BB%84%E4%BB%B6%E5%8C%96%E5%BC%80%E5%8F%91......

change_solider
2014/07/29
2.9K
7
Python3基础之学习笔记(十五)-Ajax-文件上传-图片验证码

1. Django 1.1 Ajax 1.1.1 Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,...

GoldenKitten
01/17
0
0
重学前端(8)封装ajax,http,跨域问题

前言 当我们熟练的使用axios,fetch,promise的时候是否还会想起,当年的ajax,让我们来重温ajax原理,感受一下经典 http 协议 HTTP协议,即超文本传输协议(Hypertext transfer protocol)。是...

why前端_小牛_到犀牛
06/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

关于AsyncTask的onPostExcute方法是否会在Activity重建过程中调用的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接:https://blog.csdn.net/XG1057415595/article/details/86774575 假设下面一种情况...

shzwork
今天
6
0
object 类中有哪些方法?

getClass(): 获取运行时类的对象 equals():判断其他对象是否与此对象相等 hashcode():返回该对象的哈希码值 toString():返回该对象的字符串表示 clone(): 创建并返此对象的一个副本 wait...

happywe
今天
6
0
Docker容器实战(七) - 容器中进程视野下的文件系统

前两文中,讲了Linux容器最基础的两种技术 Namespace 作用是“隔离”,它让应用进程只能看到该Namespace内的“世界” Cgroups 作用是“限制”,它给这个“世界”围上了一圈看不见的墙 这么一...

JavaEdge
今天
8
0
文件访问和共享的方法介绍

在上一篇文章中,你了解到文件有三个不同的权限集。拥有该文件的用户有一个集合,拥有该文件的组的成员有一个集合,然后最终一个集合适用于其他所有人。在长列表(ls -l)中这些权限使用符号...

老孟的Linux私房菜
今天
7
0
面试套路题目

作者:抱紧超越小姐姐 链接:https://www.nowcoder.com/discuss/309292?type=3 来源:牛客网 面试时候的潜台词 抱紧超越小姐姐 编辑于 2019-10-15 16:14:56APP内打开赞 3 | 收藏 4 | 回复24 ...

MtrS
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部