ajax方式上传文件

ajax方式上传文件

借助FormData实现表单的序列化，完成文件上传

一.ajaxUploadUI.html

此时不是借助表单提交方式，所以enctype属性可以去掉

<form id="fileForm" action="${pageContext.request.contextPath}/file/ajaxUpload.do" method="post"><table><tr><td>描述</td><td><input type="text" name="description"></td></tr><tr><td>请选择文件</td><td><input type="file" name="upload"></td></tr><tr><td colspan="2"><button type="button" data-action="upload1">上传1</button><button type="button" data-action="upload2">上传2</button></td></tr></table></form>

二.js

借助jQuery的ajax方法实现，所以需要引入jquery.js；上传主要借助FormData，可以通过提供表单元素进行初始化，也可以使用append方法，相关具体使用方法可以参考<<JavaScript高级程序设计>>

1.表单方式

$("button[data-action='upload']").on("click", function(){var url = "${pageContext.request.contextPath}/file/ajaxUpload.do";var formData = new FormData($("#fileForm")[0]);ajaxUpload(url, formData);});

2.append方法

$("button[data-action='upload2']").on("click", function(){var url = "${pageContext.request.contextPath}/file/ajaxUpload.do";// 数据var formData = new FormData();formData.append("description", $("#fileForm input[name='description']").val());// 文件var files = $("#fileForm input[name='upload']")[0].files;if(files != null && files.length > 0){formData.append("upload", files[0]);}ajaxUpload(url, formData);});

代码：

<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-2.1.4.min.js"></script><script type="text/javascript">$(function(){$("button[data-action='upload']").on("click", function(){var url = "${pageContext.request.contextPath}/file/ajaxUpload.do";var formData = new FormData($("#fileForm")[0]);ajaxUpload(url, formData);});$("button[data-action='upload2']").on("click", function(){var url = "${pageContext.request.contextPath}/file/ajaxUpload.do";// 数据var formData = new FormData();formData.append("description", $("#fileForm input[name='description']").val());// 文件var files = $("#fileForm input[name='upload']")[0].files;if (files != null && files.length > 0) {formData.append("upload", files[0]);}ajaxUpload(url, formData);});// ajax方式上传文件var ajaxUpload = function(url, formData){$.ajax({url : url,type : "POST",data : formData,dataType : "json",contentType : false,// 不设置Content-Type请求头processData : false,// 不要去处理发送的数据success: function(data) {if (data.code == 0) {alert("上传成功");} else{alert("上传失败");}}});}});</script>

三.Controller

上传的文件解析和通过表单上传相同，多了通过@ResponseBody返回json，相应可以在前台给出上传的结果；

@RequestMapping("/ajaxUpload")public @ResponseBody Map<String, Object> ajaxUpload(HttpServletRequest request,@RequestParam("upload") MultipartFile upload, @RequestParam String description) throws Exception {System.out.println(description);Map<String, Object> dataMap = new HashMap<String, Object>();int code = 1;String message = "文件上传失败";if (!upload.isEmpty()) {String realpath = getBasePath(request) + "/file";// 获取绝对路径String originalFilename = upload.getOriginalFilename();// 文件名upload.transferTo(new File(realpath, originalFilename));// 上传文件code = 0;message = "文件上传成功";}dataMap.put("code", code);dataMap.put("message", message);return dataMap;}

四.测试结果

五.注

(1)WEB经常使用的功能之一是表单数据的序列化，XMLHttpRequest 2级为此定义了FormData类型。FormData为序列化表单以及创建与表单格式相同的数据（用于通过XHR传输）提供了便利。

(2).FormData可用于上传文件，而对于$("#fileForm").serialize()只能序列化普通数据

(3).使用FormData不必明确设置请求头部，XHR对象能识别传入数据的类型是FormData实例，并配置适当的头部信息。

(4).现在主流浏览器都支持该类型，所以在使用时需要注意一下。具体对于FormData的使用方法参考<<JavaScript高级程序设计>>

(5).后台通过spring mvc处理上传的上传，且返回了json数据，需要配置springmvc.xml，以及引入先关解析json的jar包（jackson-core-asl.jar和jackson-mapper-asl.jar），否则报错；