js前端formData技术，后端MultipartFile的单文件多文件上传

单文件上传

1. html/jsp页面

<div>
	<ul>
		<li style="width: 100%;">
			<label>工会会员登记表<em>*</em></label>
			<form id="uploadtest" enctype="multipart/form-data" method="post" action="#">
				<input type="file" name="file"  accept=".xls,.xlsx">
				<label class="error">请上传会员登记表</label>
				<button class="input_upload" type="button" onclick="doupload(uploadtest)">上传登记表</button>
			</form>
		</li>
	</ul>
	<ul>
		<li style="width: 100%;">
			<label>筹备组名单<em>*</em></label>
			<form id="uploadtest2" enctype="multipart/form-data" method="post" action="#">
			   <input type="file"  name="file" class="fileinput" accept=".xls,.xlsx">
				<label class="error">请上传筹备组名单</label>
				<button class="input_upload" type="button" onclick="doupload(uploadtest2)">上传名单表</button>
			</form>
		</li>
	</ul>
</div>							

上面注意form表单的enctype=“multipart/form-data” method=“post”，input的type=“file” name=“file” ,这里type="file"表明这个input是上传文件用不是文本输入框，name="file"是要与java后端的MultipartFile的参数一致，如:
public void upload(@RequestParam(“file”) MultipartFile file){…}

2. jquery 前端

function  doupload(id) {
            var dd=null;
            //var formData = new FormData($( "#"+id )[0]);
            var form = document.getElementById(id);
            // 用表单来初始化
            var formData = new FormData(form);
            $.ajax({
                url: "/system/oss/upload",
                type: 'POST',
                data: formData,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    dd=data;
                },
                error: function (data) {
                    layer.msg(data);
                }
            });
            return dd;
        }

注意事项：比一般的异步ajax多了几项内容，
cache: false,
contentType: false,
processData: false,

3、java后端–MultipartFile

public String upload(@RequestParam("file") MultipartFile file,HttpServletRequest request) throws Exception {
    if (file.isEmpty()) {
        throw new OssException("上传文件不能为空");
    }
    // 上传文件
    String fileName = file.getOriginalFilename();
    String suffix = fileName.substring(fileName.lastIndexOf("."));
//request.getSession().getServletContext() 获取的是Servlet容器对象，相当于tomcat容器了。getRealPath("/") 获取实际路径，“/”指代项目根目录，所以代码返回的是项目在容器中的实际发布运行的根路径
    String realPath = request.getSession().getServletContext().getRealPath("/"); 		  // 自定义的文件名称
   	String trueFileName = String.valueOf(System.currentTimeMillis()) + fileName; // 设置存放图片文件的路径,这里在工程的webapp下新建一个upload的目录存放上传文件
   	String path = realPath +"/upload/"+trueFileName;
   	System.out.println("存放图片文件的路径:" + path); // 转存文件到指定的路径
   	file.transferTo(new File(path));
   	System.out.println("文件成功上传到指定目录下");
    }

注意事项：@RequestParam(“file”) 的file必须是HTML页面input框中name的值

多文件上传

1、html页面

<div class="infoenter user_form">
	<ul>
		<li style="width: 100%;">
			<label>开会小视频<em>*</em></label>
			<form id="uploadtest5" enctype="multipart/form-data" method="post" action="/system/oss/uploads">
				<input type="file"  id="videoMeeting" name="files" class="fileinput" multiple/>
				<input type="submit" value="上传">
			</form>
		</li>
	</ul>
	<ul>
		<li style="width: 100%;">
		<label>开会照片<em>*</em></label>
		<form id="upBox" enctype="multipart/form-data" method="post" action="#" style="width: 800px">
			<input type="file" name="files" title="请选择图片" id="photoMeeting" multiple accept="image/jpg,image/JPEG" />
			<input type="button" onclick="douploads(photoMeeting)">
		</form>
		</li>
	</ul>
</div>

注意1：上传视频的那个是用submit方式提交的，下面的开会照片是用ajax提交，submit方式我没有测试
注意2：input 的name=“files”，增加了input的属性multiple 属性规定输入字段可选择多个值。
如果使用该属性，则字段可接受多个值，即这里可以多选文件上传啦

2、jquery针对于ajax提交

function  douploads(id) {
            var dd=null;
            var fd=new FormData();
            for(var i=0;i<$("#"+id)[0].files.length;i++){
                fd.append("files",$("#"+id)[0].files[i]);
            }
            $.ajax({
                url: "/system/oss/uploads",
                type: 'POST',
                data: fd,
                async: false,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    dd=data;
                },
                error: function (data) {
                    layer.msg(data);
                }
            });
            return dd;
        }

注意：这里的id是指input框的id,不是单文件上传时的form表单id,上面的for循环遍历了上传的多文件；
这里增加一个小知识：
① FormData的附加是通过append来进行的，删除是通过delete；FormData也可认为是上传文件的form表单序列化
例如：
附加：
data.append(“yzm”,yzm);
删除：
data.delete(“yzm”);
② 平常无文件上传的form表单序列化是用serializeArray；
例：var data = $("#user_form1").serializeArray();
data.push({“name”: “createTime”, “value”: time});
上面的意思就是将一个表单id=user_form1的form值序列化，序列化后的值data可以直接通过ajax提交到后台，form表单中input框的name值要与后台准备接受的实体字段相对应，实体字段可以多，比如实体中有"createTime"字段，form表单没有，可以直接序列化提交，也可以通过给序列化后的data再次附加值，serializeArray的附加用的是push ：

var config = {
    url: "/portal/tbenterpriseuser/UpdateBaseInfor",
    type: "post",
    dataType: "json",
    data: data,
    success: function(result) {
        if (result.code == web_status.SUCCESS) {
            if(result.msg=="4"){
                layer.msg(result.data)
			}else if(result.msg=="5"){
	                layer.msg(result.data)
			}} else if (result.code == web_status.WARNING) {
	            layer.msg(result.data);
	        } else {
	            layer.msg(result.data);
	        }
    }
};
 $.ajax(config)

3、java后端

 public AjaxResult uploads(@RequestParam(required = false, value = "files") MultipartFile[] multipartFiles) throws Exception {
        if (multipartFiles.length == 0) {
            throw new OssException("上传文件不能为空");
        }
        String savePath = "D:\\MultipartFile\\";
        for (MultipartFile file : multipartFiles) {
            // 上传文件
            String fileName = file.getOriginalFilename();
            String suffix = fileName.substring(fileName.lastIndexOf("."));
            file.transferTo(new File(savePath + fileName ));
         }
    }

注意：方法中中value="files"是与html页面中name的属性值一致