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>"
);
}
结束语:有些地方可能有问题,如有看见,多谢指点