文件上传的用处很大，比如上传头像什么的，都需要文件上传。

今天我刚写完文件上传，大大小小的各种bug，我也是很苦恼。但是还好终于都写完了。来博客分享一下。

最重要的就是Multiparfile 和 jesyf实现跨域！

需要的jar包:

文件上传：com.springsource.org.apache.commons.fileupload-1.2.0.jar

文件的读写：com.springsource.org.apache.commons.io-1.4.0.jar

由于是跨服务器上传，这里是通过jersey实现的：

jersey-client-1.18.jar

jersey-core-1.18.jar

在springmvc配置文件中，加上配置：

db.properties配置文件：修改url

url=jdbc\:mysql\:///mybatis?useUnicode=true&characterEncoding=utf8

去tomcat 修改jersey服务：

我们模拟创建一个图片服务器，在web下创建一个存放图片的地方(upload)，然后更换端口号(别跟主工程一样就行)

接下来运行工程，自浏览器打开的网页别关。

然后我们在创建一个要获取文件的工程。这个工程必须是一个SSM。可以运行的。

创建一个list.jsp(显示查询出来的数据)

创建一个UpdateUser.jsp(修改界面)

Mapper和Service层，自己写就可以了。就是简单的一个修改，和查询。

数据库的表可以按照我的PO类进行创建。也可以用自己的。(图片的字段设置null)！

这个是PO类。

public class Items {

private Integer id;

private String name;

private Float price;

private String pic;

private String createtime;

private String detail;

public Integer getId() {

return id;

}

public void setId(Integer id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name == null ? null : name.trim();

}

public Float getPrice() {

return price;

}

public void setPrice(Float price) {

this.price = price;

}

public String getPic() {

return pic;

}

public void setPic(String pic) {

this.pic = pic == null ? null : pic.trim();

}

public String getCreatetime() {

return createtime;

}

public void setCreatetime(String createtime) {

this.createtime = createtime;

}

public String getDetail() {

return detail;

}

public void setDetail(String detail) {

this.detail = detail == null ? null : detail.trim();

}

@Override

public String toString() {

return "Items{" +

"id=" + id +

", name='" + name + '\'' +

", price=" + price +

", pic='" + pic + '\'' +

", createtime=" + createtime +

", detail='" + detail + '\'' +

'}';

}

}

MultipartHttpServletRequest 用于根据name名称获取多部件请求对象

CommonsMultipartFile 多部件请求对象，该对象可以获取到file文件对象信息，用于上传文件做准备

PrintWriter 对象可以将json对象回传给ajax

步骤：

1 设置方法三个参数

2 根据input的name名获取CommonsMultipartFile 对象

3 获取文件上传流

4 拼接文件名(毫秒时间+2个随机数)

5 获取源文件扩展名，后缀

6 创建上传服务器文件完整路径 Commons.PIC_HOST+"/upload/"+fileNameStr+suf

7 创建jesy服务器Clien对象，实现跨域上传

8 开始上传 resource.put(String.class,bytes);

9 拼接相对文件路径，用于存储到数据库中

10 将完整路径与相对路径拼接为json格式 String result="{\"fullPath\":\""+fullPath+"\",\"relativePath\":\""+relativePath+"\"}";

11 回传给ajax printWriter.print(result);

这个是我Controller层：

@RequestMapping(value = "uploadPic",method = RequestMethod.POST)

// MultipartHttpServletRequest 用于根据name名称获取多部件请求对象

public void uploadPic(MultipartHttpServletRequest request, String fileName, PrintWriter printWriter){

CommonsMultipartFile cmf = (CommonsMultipartFile) request.getFile(fileName);

// 获取文件上传流

byte[] bytes = cmf.getBytes();

String fileNameStr = "";

SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMddHHmmssSSS");

fileNameStr = sdf.format(new Date());

System.out.println("时间戳"+fileNameStr);

Random random = new Random();

for (int i = 0; i < 3; i++) {

fileNameStr +=random.nextInt(10);

}

// 获取文件扩展名

String originalFilename = cmf.getOriginalFilename();

String suf = originalFilename.substring(originalFilename.lastIndexOf("."));

System.out.println("获取文件扩展名"+suf);

// 创建jesyf服务器，实现跨域上传文件

Client client = new Client();

WebResource resource = client.resource(Commons.PIC_HOST+"/upload/"+fileNameStr+suf);

resource.put(String.class,bytes);

// 拼接图片完整路径

String fullPath = Commons.PIC_HOST+"/upload/"+fileNameStr+suf;

String relativePath = "/upload/"+fileNameStr+suf;

String result="{\"fullPath\":\""+fullPath+"\",\"relativePath\":\""+relativePath+"\"}";

System.out.println("完整路径"+result);

System.out.println("完美路径"+relativePath);

// 向页面输出一个json对象

printWriter.print(result);

}

这个页面是显示我查询出来数据的jsp页面。

pageEncoding="UTF-8"%>

--%>

--%>

--%>

欢迎使用list回显

配置公共路径：

再没上传图片之前，picPath是空的。(是为了在上传之后，你会发现数据库已经有了图片路径，到那时页面没显示，就需要这句话。)

编号	姓名	价格	详情	商品图片	日期
${items.id}	${items.name}	${items.price}	${items.detail}		${items.createtime}	修改	删除

ajax使用的是：

jQuery Form插件是一个优秀的Ajax表单插件，可以非常容易地、无侵入地升级HTML表单以支持Ajax。

jQuery Form有两个核心方法 – ajaxForm() 和 ajaxSubmit()， 它们集合了从控制表单元素到决定如何管理提交进程的功能

使用JQuery的$.ajax()会报错。

如果使用$.ajax()请求，则提交的Request类型最终为RequestFacade，而不是MultipartHttpRequest

这个是我的修改界面：

pageEncoding="UTF-8"%>

Title

--%>

--%>

function submitImgSize1Upload(){

// alert('你是猪吗'); 验证是否走了点击事件

var option={

url:'${pageContext.request.contextPath }/upload/uploadPic.do',

type:'POST',

dataType:'text',

data:{

fileName : 'imgSize1File' 将选取的图片路径传到后台进行处理。

},

success:function(data){

alert(data);

//把json格式的字符串转换成json对象

var jsonObj = $.parseJSON(data);

// 通过input标签设置的ID，把图片路径fu gei

//返回服务器图片路径，把图片路径设置给img标签(显示修改页面的图片)

$("#imgSize1ImgSrc").attr("src",jsonObj.fullPath);

//数据库保存相对路径，在图片的input标签内加上Id，把imgSize1写到id内

//把路径传到后台，添加到数据库中。

$("#imgSize1").val(jsonObj.relativePath);

},

};

//拿到form表单对象，提交表单

$("#itemForm").ajaxSubmit(option);

}

这个属性是文件上传必须用到的

姓名:

价格 :

描述 :

商品图片:

图片路径:

日期 :

这个是Maven版本的需要导入的依赖：