上传文件小Demo

一、背景

软件开发过程中，文件上传在很多项目中都是很重要的功能点。现在成熟的技术背景下，上传文件并不是很神秘的事，但是很多小伙伴还是时感迷茫，今天就跟大家分享一个上传文件的小demo。

二、核心内容

1.传统form表单提交上传文件

传统form表单上传文件，可以说是最原生的上传文件方式。我们直接看代码：

前端代码为：

其中关键是enctype这个属性，详解如下：

enctype这个属性管理的是表单的MIME（Multipurpose Internet Mail Extensions）编码,共有三个值可选：

1、application/x-www-form-urlencoded ---默认值,作用是设置表单传输的编码,不能用于上传文件

eg: AJAX中xmlHttp.setRequestHeader("Content-Type","application/x-www-form- urlencoded"),不写会报错的

form表单里是可以不写enctype=application/x-www-form-urlencoded,因为默认HTML表单就是这种传输编码类型

2、multipart/form-data ---制定传输数据的特殊类型,上传的非文本的内容，比如图片或是是mp3

3、text/plain ---纯文本传输，不能用于上传文件

另外还要注意数据提交方式设置为“post”。get方式传输数据有大小限制为2KB。而post方式原则上是没有大小限制的（实际上有，有兴趣的可以尝试）

2.ajax上传文件

ajax2.0后开始支持文件上传的。通过FormData类来实现。前端源码如下：

文件:

上传文件

$(function () {

$("#upload").click(function () {

var formData = new FormData($('#uploadForm')[0]);

$.ajax({

type: 'post',

url: "http://localhost:8080/dch2/FileUpLoadController/oneFileUpload.do",

data: formData,

cache: false,

processData: false,

contentType: false,

}).success(function (data) {

alert(data);

}).error(function () {

alert("上传失败");

});

});

});

根本上讲：ajax上传底层还是form表单提交，只是进行了封装。现在应用系统中大部分使用ajax文件上传，良好的异步操作更适用于现代系统。

3.Java后台代码

不论哪种文件上传，他们后台都是公用的，有时候只需要进行一些小的修改就行。代码如下：

@RequestMapping(value="oneFileUpload.do")

public String oneFileUpload(HttpServletRequest request, ModelAndView model){

MultipartFile mf = null;

if (!(request instanceof MultipartHttpServletRequest)) {

String errorMsg = "your post form is not support ENCTYPE='multipart/form-data' ";

logger.error(errorMsg);

throw new RuntimeException(errorMsg);

}

String savePath = request.getSession().getServletContext().getRealPath("/upfile");

MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;

List multipartFiles = multipartRequest.getFiles("file");

if (null != multipartFiles && multipartFiles.size() > 0) {

mf = multipartFiles.get(0);

String realPath = mergeStringWithSeparator(savePath,mf.getOriginalFilename());

File source = new File(realPath);

try {

mf.transferTo(source);

logger.debug("Upload file " + source.getAbsoluteFile() + " Success!");

} catch (Exception e) {

String errorMsg = "Upload file " + source.getAbsoluteFile() + " Error!" + e.getMessage();

logger.error(errorMsg);

throw new RuntimeException(errorMsg);

}

}

return "上传成功";

}

mergeStringWithSeparator函数如下：

public static String mergeStringWithSeparator(String...args){

StringBuilder sb=new StringBuilder();

for (String arg : args) {

sb.append(arg);

sb.append(File.separator);

}

return sb.substring(0, sb.length()-1).toString();

}

三、总结

今天在这里跟大家分享了一个小的文件上传demo。赶紧收藏，想要使用的时候就不需要自己想了。

欢迎转转发，关注哦。谢谢大家