ajax异步上传文件
程序员文章站
2022-06-03 08:52:31
...
如果项目越做越大，把文件上传到本地磁盘的话，项目会越来越庞大，影响项目性能，所以需要使用跨服务器的ajax异步上传。
需求：
- 上传图片，页面不刷新，图片立马回显，图片储存在另一台服务器上。
分析：
- 页面不刷新–>使用异步（ajax）
- 跨服务器上传文件–>使用sun公司开发的工具包：jersey
异步上传文件条件：
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/";
}
效果：
上一篇： SOA系列之基本概念
下一篇： flask文件的上传