前端通过ajax请求一次性上传多张图片到后台

HTML代码

			<div class="item">
				<span>上传附件</span>
				<input type="file" name="files" class="form-control" id="file" multiple="multiple" >
             </div>                   

	*注意：此处想一次上传多张图片必须添加multiple="multiple"属性（百度到的，亲测有效）

前端jq代码

	//添加附件start
					var formData = new FormData();
			        for(var i=0;i<$("#file")[0].files.length;i++) {  //循环获取上传个文件
			            formData.append("file", $("#file")[0].files[i]);
			        }
			        formData.append("bid",bid);//此处可以添加一个参数和图片一起上传
			        $.ajax({
			            "url": "addBillAcc",
			            "data" : formData,
			            "dataType":"json",
			            "type": "post",
			            "contentType" : false, //上传文件一定要是false
			            "processData":false,
			            "success" : function(obj) {
							if (obj.state == 1) {
							layer.alert("上传成功！");
							}else{
								layer.alert(obj.message);
							}
						}
			        });
		//添加附件end

直接粘贴代码

控制层代码

//此处是判断图片的格式是否符合要求，直接写到静态块里面
public static final List<String> AVATAR_CONTENT_TYPE = new ArrayList();
	static {
		AVATAR_CONTENT_TYPE.add("image/jpeg");
		AVATAR_CONTENT_TYPE.add("image/png");
		AVATAR_CONTENT_TYPE.add("image/jpg");
	}

/**
	 * 添加账单附件
	 * 
	 * @param files 所有的附件
	 * @return
	 */
	@RequestMapping("addBillAcc")
	@ResponseBody
	**//因为是多个文件，传过来需要一个数组接收  MultipartFile[] files**
	public ResponseResult<Integer> addBillAcc(@RequestParam("file") MultipartFile[] files,
			@RequestParam("bid") Integer bid, HttpSession session,MultipartHttpServletRequest request) {			
		ResponseResult<Integer> result = new ResponseResult<>();
		//先创建一个保存所有图片实体类的集合
		List<BillAccessory> accessories = new ArrayList<BillAccessory>();
		try {
			// 因为是多个文件，遍历文件
			for (int i = 0; i < files.length; i++) {
				// 判断附件大小是否超标
				if (files[i].getSize() > 10 * 1024 * 1024) {
					throw new UserNotFoundException("图片不可以超过10MB，您选择的图片过大，超出了范围");
				}
				// 保存附件的文类型是否超标
				if (!AVATAR_CONTENT_TYPE.contains(files[i].getContentType())) {
					throw new UserNotFoundException("请输入符合类型的文件");
				}
				// 确定保存附件的文件夹的路径
				String pathname = request.getServletContext().getRealPath("/static/upload/image");
				System.out.println(pathname);
				// 保存附件的文件夹
				File parent = new File(pathname);
				// 确保文件夹是存在的
				if (!parent.exists()) {
					parent.mkdirs();
				}
				// 获取上传的附件的原始文件名
				String originalFilename = files[i].getOriginalFilename();
				// 处理扩展名
				String suffix = "";
				int beginIndex = originalFilename.lastIndexOf(".");
				if (beginIndex > 0) {
					suffix = originalFilename.substring(beginIndex);
				}
				// 文件名
				String filename = System.currentTimeMillis() + "" + System.nanoTime() % 100000 + suffix;
				// 保存的目标文件，即：将用户上传的图片保存为哪个文件
				File dest = new File(parent, filename);
				// 保存用户上传的附件
				try {
					files[i].transferTo(dest);
				} catch (IllegalStateException e) {
					e.printStackTrace();
					//比较懒，直接随便用了一个异常，嘻嘻
					throw new UserNotFoundException("文件被移动，无法访问数据！");
				} catch (IOException e) {
					e.printStackTrace();
					throw new UserNotFoundException("存入数据时出现未知异常");
				}
				//确定保存到数据库的名字
				String address = "static/upload/image/" + filename;
				//实体类
				BillAccessory accessory = new BillAccessory();
				//对应的图片地址保存到实体类中
				accessory.setAddress(address);
				//和其他关联的id
				accessory.setBid(bid);
				//将实体类添加到集合中
				accessories.add(accessory);
			}
			//这里写错位置了，应该先判断穿过来的图片是否为空，可以提高效率（没来的急改）
			if(accessories.size() !=0) {
			//执行批量添加到数据库
				billService.addBillAccs(accessories);
			}
			result.setState(ResponseResult.STATE_OK);
		} catch (ServiceException e) {
			result.setState(ResponseResult.STATE_ERR);
			result.setMessage(e.getMessage());
		}
		// 返回
		return result;
	}

页面显示

因为我们上传是多张图片，展示的话可以直接遍历穿过来的地址
我此处使用的是jsp，就直接用jsp写了

//附件 
			$("#accessory_de").empty();
				for (var i = 0; i <json.data.billAccessorys.length ; i++) {
			$("#accessory_de").append(
					"<div class='one_box'>"
                   +"<img class='img-response' src='${pageContext.request.contextPath}/"+json.data.billAccessorys[i].address+"'> "
                   +"</div>"
				);
			}

结束语：有些地方可能有问题，如有看见，多谢指点