html mvc 二进制图片,如何利用springmvc上传图片二进制到数据库并回显到网页

spring mvc and mybatis 上传图片并保存blob文件和回写jsp页面预览

首先要明白几点：

1 spring mvc 上传文件用表单提交时form 中enctype="multipart/form-data"如

果不加的话文件上传会fail并且后台接受不到。

2我们必须要在springmvc中设置一个文件拦截配置

这里我才知道spirng框架已经集成了fileupload所以只要导入spring的核心core。jar包即可

3 由于我是写的保存blob文件所以不涉及虚拟文件路径

以下是代码-----------------------------------------------------

java的类定义

public class Person

{

Integer id;

byte [ ] photo;//

}

spring mvc controller 层的定义

{

Person person=new Person();

MultipartHttpServletRequest multipartRequest =(MultipartHttpServletRequest) request;

MultipartFile file=multipartRequest.getFile("photo");

person.setPhoto(file.getbyte());

personService.save(person)// service层调用dao层完成对文件的保存了/

}

上传jsp页面

这里我用了一个js方法他可以去点击浏览选择图片后图片显示到上传jsp中以便用户更好的体验效果

//预览图片

function preview(obj)

{

var result = document.getElementById("result");

var input = document.getElementById("photo");

if(typeof FileReader==='undefined')

{

layer.alert("抱歉，你的浏览器不支持", {icon: 5});

input.setAttribute('disabled','disabled');

}

else

{

// input.addEventListener('change',readFile,false);

var file = obj.files[0];

if(!/image\/\w+/.test(file.type))

{

layer.msg('文件必须为图片!');

$("#photo").attr("value","");

return false;

}

var reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = function(e)

{

                  result.innerHTML = ''

}

}

}

filereader好像是ie5以上支持

下面是jsp回写当修改时照片从数据库中读出二进制传到jsp中jsp直接读取二进制流

定义一个photo.jsp

response.setContentType("image/jpeg");

ServletOutputStream sout = response.getOutputStream();

byte b[] = (byte [])request.getAttribute("photo") ;

sout.write(b);

sout.flush();

sout.close();

out.clear();

out = pageContext.pushBody();

%>

这里需要注意的是request.getAttribute()他需要controller层把二进制requeset.setAttribute("photo",person.getphoto);

在调用photo.jsp那个jsp中我们可以用iframe

这里我用的是一个iframe(我的上传jsp和修改jsp是一个jsp页面)

我在controller层里写了一个

@RequestMapping(value="setPhoto")

public String setPhoto(int id,HttpServletResponse response,HttpServletRequest request)

{

request.setAttribute("photo",Person.get(id).getPhoto());

return "/personform/photo";

}

这样就做好了