ajax异步上传文件

Limitless*

已于 2024-01-04 14:28:52 修改

阅读量238

点赞数

分类专栏： Java 文章标签： ajax 异步

于 2017-11-29 10:29:52 首次发布

本文链接：https://blog.csdn.net/shihuahao0353/article/details/78661534

版权

Java 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

如果项目越做越大，把文件上传到本地磁盘的话，项目会越来越庞大，影响项目性能，所以需要使用跨服务器的ajax异步上传。
需求：

上传图片，页面不刷新，图片立马回显，图片储存在另一台服务器上。

分析：

页面不刷新–>使用异步（ajax）
跨服务器上传文件–>使用sun公司开发的工具包：jersey

ajax异步上传流程

异步上传文件条件：

1、导入jar文件（jersey、commons-io、commons-fileupload）
2、在springmvc配置文件中配置上传文件解析器

<!-- 配置文件上传解析器 -->
	<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
		<!-- 最大上传的文件大小 -->
		<property name="maxUploadSize" value="10240000"></property>
	</bean>

3、创建图片服务器
新建一个web项目，在WebContent目录下创建一个用来保存文件的文件夹，但文件夹下必须有一个文件，否则不会被编译，就不会创建这个文件夹。
搭建一个服务并修改服务的端口号，将图片服务器部署在这个服务上面。
这个图片服务器不能被随便写入东西，所以要配置图片服务器权限 ↓
这里写图片描述
环境准备完毕！
页面展示：

html代码：

<body>
	<form id="itemForm" action="" method="post">
		<input type="hidden" name="id" value="${item.id }" /> 修改商品信息：
		<table width="100%" border=1>
			<tr>
				<td>商品名称</td>
				<td><input type="text" name="name" value="${item.name }" /></td>
			</tr>
			<tr>
				<td>商品价格</td>
				<td><input type="text" name="price" value="${item.price }" /></td>
			</tr>
			<tr>
				<td>商品生产日期</td>
				<td><input type="text" name="createtime"
					value="<fmt:formatDate value="${item.createtime}" pattern="yyyy-MM-dd HH:mm:ss"/>" /></td>
			</tr>
			<tr>
				<td>商品图片</td>
				<td>
					<p>
						<label></label>
						<!-- 图片回显标签 -->
						<img id='imgSize1ImgSrc' src='' height="100" width="100" />
						<!-- 上传图片 -->
						<input type='file' id='imgSize1File' name='imgSize1File'
							class="file" onchange='submitImgSize1Upload()' /><span
							class="pos" id="imgSize1FileSpan">请上传图片的大小不超过3MB</span>
						<!-- ajax回写图片地址，然后把图片地址保存数据库 -->
						<input type='hidden' id='imgSize1' name='pic' value='' reg="^.+$"
							tip="亲！您忘记上传图片了。" />
					</p>
				</td>
			</tr>
			<tr>
				<td>商品简介</td>
				<td><textarea rows="3" cols="30" name="detail">${item.detail }</textarea>
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center"><input type="submit" value="提交" />
				</td>
			</tr>
		</table>
	</form>
</body>

js异步上传代码：

<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/jquery.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/jquery.form.js"></script>
<script type="text/javascript">
	//原始上传图片：提交表单进行上传，图片流对象包含在表单对象中
	//异步上传：提交表单对象，才能把图片流对象传入request请求对象中
	//ajax异步上传函数
	function submitImgSize1Upload() {
		var option = {
			type : 'post',
			url : '${pageContext.request.contextPath }/uploadPic.do',
			dataType : 'text',
			success : function(data) {
				//把data数据转换成json对象格式
				var obj = $.parseJSON(data);
				//回调函数
				//图片回显
				$('#imgSize1ImgSrc').attr("src", obj.fullPath);
				//数据库保存图片地址
				$("#imgSize1").val(obj.fullPath);
			}
		};

		//提交表单
		$("#itemForm").ajaxSubmit(option);
	}
</script>

后台代码：

package com.demo.controller;

import java.io.PrintWriter;
import java.util.UUID;

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

import com.demo.utils.Constants;
import com.sun.jersey.api.client.Client;
import com.sun.jersey.api.client.WebResource;

@Controller
public class UploadController {

	/**
	 * 需求：ajax异步文件上传
	 */
	@RequestMapping("uploadPic")
	public void uploadPic(MultipartFile imgSize1File, PrintWriter out){
		
		try {
			//获取上传文件扩展名
			String originalFilename = imgSize1File.getOriginalFilename();
			//截取文件扩展名
			String extName = originalFilename.substring(originalFilename.lastIndexOf("."));
			
			//使用uuid作为文件名称
			String filename = UUID.randomUUID().toString();
			
			//使用jersey客户端上传
			//创建客户端对象
			Client client = Client.create();
			//关联远程图片器地址
			WebResource resource = client.resource(Constants.IMAGE_URL+"upload/"+filename+extName);
			
			//开始上传
			resource.put(String.class,imgSize1File.getBytes());
			
			//回显图片地址
			//回写图片地址必须组合成jaon格式
			String fullPath = Constants.IMAGE_URL+"upload/"+filename+extName;
			//组合一个json字符串返回值
			String result = "{\"fullPath\":\""+fullPath+"\"}";
			
			//打印回去
			out.print(result);
			
		} catch (Exception e) {
			e.printStackTrace();
		}
	}
}

把图片服务器路径封装到一个常量类中：

package com.demo.utils;

public class Constants {

	public static final String IMAGE_URL = "http://localhost:8081/image/";
}

效果：
这里写图片描述

Limitless*

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
ajax异步上传文件

如果项目越做越大，把文件上传到本地磁盘的话，项目会越来越庞大，影响项目性能，所以需要使用跨服务器的ajax异步上传。需求：上传图片，页面不刷新，图片立马回显，图片储存在另一台服务器上。分析：页面不刷新–>使用异步（ajax）跨服务器上传文件–>使用sun公司开发的工具包：jersey异步上传文件条件：1、导入jar文件（jersey、commons-io、commons-fileupl
复制链接

扫一扫