@MultipartConfig
//上传图片
Part part = request.getPart("photo");//photo是前台页面type=file标签中name属性的值
String disposition = part.getHeader("Content-Disposition");
String suffix = disposition.substring(disposition.lastIndexOf("."),disposition.length()-1);//获取文件后缀
String filename = UUID.randomUUID()+suffix;
InputStream is = part.getInputStream();
String serverpath = request.getServletContext().getRealPath("images/product");//获取服务器路径
FileOutputStream fos = new FileOutputStream(serverpath+"/"+filename);//filename是图片
byte[] bty = new byte[1024];
int length =0;
while((length=is.read(bty))!=-1){
fos.write(bty,0,length);
}
fos.close();
is.close();
第二种
Part part = request.getPart("photo");//photo是前台页面type=file标签中name属性的值
String disposition = part.getHeader("Content-Disposition");
String suffix = disposition.substring(disposition.lastIndexOf("."),disposition.length()-1);//获取文件后缀
String filename = UUID.randomUUID()+suffix;
InputStream is = part.getInputStream();
String serverpath = "c:/var/uploaded_files/";//图片保存路径
FileOutputStream fos = new FileOutputStream(serverpath+"/"+filename);//filename是图片
byte[] bty = new byte[1024];
int length =0;
while((length=is.read(bty))!=-1){
fos.write(bty,0,length);
}
fos.close();
is.close();
servlet3.0新特性-----文件上传(多文件)
1.前台页面(使用form表单保存图片)
注:form标签中
1.必须为post方式提交
2.必须加上 enctype=“multipart/form-data”
3.name=“fileWorkPicture”,提交图片需要以file开头,相当于标识后台好定位
<form method="post" action="/addPicture" enctype="multipart/form-data">
图片:<input type="file" name="fileIdPicture" id="idPicture">
图片2:<input type="file" name="fileWorkPicture" id="picture">
<input type="submit" value="确认">
</form>
2.后台controller页面
//增加
@RequestMapping("/add")
public String addPic(){
return "add";
}
@RequestMapping(value = "/addPicture",method = RequestMethod.POST)
public String insert(@ModelAttribute(value = "picture") Picture picture,HttpServletRequest request)throws ServletException, IOException {
//多文件上传
String photo1=null;
String photo2=null;
for (Part part : request.getParts()) {
//前台form表单中,name属性必须是file开头,可以改成其他的)
if (part.getName().startsWith("file")) {
//获取 文件所有信息
String header = part.getHeader("Content-Disposition");
//截取 文件名 + 后缀名
String substring = header.substring(header.indexOf("filename=\"")+10, header.length()-1);
String fileName = UUID.randomUUID() + substring;//防止重复
//文件保存 项目静态资源的路径 + 文件名
String filePath = "D:\\idea\\save\\test\\picture\\src\\main\\resources\\static\\images\\" + fileName;
//流 将文件读进文件夹
part.write(filePath);
//判断,fileIdPicture是前台form表单中name属性
if(header.contains("fileIdPicture")){
photo1=fileName;
}if(header.contains("fileWorkPicture")){
photo2=fileName;
}
}
}
picture.setIdPicture(photo1);
picture.setPicture(photo2);
int i = pictureService.insertSelective(picture);
if (i>0){
return "redirect:/login";
}else {
return "redirect:/add";
}
}
3.前台显示图片页面
< img src="…/static/images/’+data[0][i].idPicture+’" alt="">,从静态资源里面导出图片
// 遍历 信息
$("tr:gt(0)").remove();
for (var i = 0;i < data[0].length;i++){
var $str=$("<tr id='ddd"+data[0][i].id+"'></tr>");
$( "table").append($str);
$str.append('<td>'+data[0][i].id+'</td>')
.append('<td>'+data[0][i].name+'</td>')
.append('<td>'+data[0][i].passWord+'</td>')
.append('<td><img src="../static/images/'+data[0][i].idPicture+'" alt=""></td>')
.append('<td><img src="../static/images/'+data[0][i].picture+'" alt=""></td>')
.append('<td>'+data[0][i].createDate+'</td>')
.append('<td><a href="#" id="del'+data[0][i].id+'" del="'+data[0][i].id+'">删除</a>' +
'<a href="/update?id='+data[0][i].id+'">修改</a>' +
'<a href="/add">增加</a></td>');
}
1.form表单
<form id="pictureSave" enctype="multipart/form-data">
<input type="file" name="filePicture" id="picture">
<button type="button" onclick="pictureSave()">发送</button>
</form>
2.js页面(使用异步请求)
{
field : 'picture',
title : '图片',
formatter : function(value, row, index) {
var uploadPath ="<img style='width: 50px' src=/files/"+row.picture+">";//files是配置的虚拟路径
return uploadPath;
}
}
//图片发送
function pictureSave(){
var formData = new FormData($("#pictureSave")[0]) //#pictureSave 是定位前台的formb表单
formData.append('picture', $('#picture')[0].files[0]) //#picture 是定位的input标签
$.ajax({
cache : true,
type : "POST",
url : "/book/book/picture",
data : formData,// 上面的formData
async : false,
contentType: false, //直接复制
processData: false, //直接复制
error : function(request) {
parent.layer.alert("Connection error");
},
success : function(data) {
if (data.code == 0) {
parent.layer.msg("操作成功");
parent.reLoad();
var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引
parent.layer.close(index);
} else {
parent.layer.alert(data.msg)
}
}
});
}
3.controller
//保存图片
@RequestMapping(value = "/picture",method = RequestMethod.POST)
@ResponseBody
public R picture(MultipartFile picture, HttpServletRequest request) throws IOException, ServletException {
//多文件上传
String photo1=null;
String photo2=null;
for (Part part : request.getParts()) {
//前台form表单中,name属性必须是file开头,可以改成其他的)
if (part.getName().startsWith("file")) {
//获取 文件所有信息
String header = part.getHeader("Content-Disposition");
//截取 文件名 + 后缀名
String substring = header.substring(header.indexOf("filename=\"")+10, header.length()-1);
String fileName = UUID.randomUUID() + substring;//防止重复
//文件保存 项目静态资源的路径 + 文件名
String filePath = "c:/var/uploaded_files/" + fileName;
//流 将文件读进文件夹
part.write(filePath);
//判断,fileIdPicture是前台form表单中name属性
if(header.contains("fileuploadattachment")){
photo1=fileName;
}if(header.contains("fileWorkPicture")){
photo2=fileName;
}
}
}
Book book=new Book();
book.setPicture(photo1);//phone1是上面的保存路径
int i = bookService.insertSelective(book);
if (i> 0) {
return R.ok();
}else {
return R.error();
}
}
}