Ajax 实现上传图片即时预览功能

 

原文出自：http://www.pm-road.com/index.php/2014/07/31/50/

很多网站在上传头像或照片的时候，都会有一个预览功能，结合自身体验将该功能实现一下；要求：图片保存到数据库
之前，我在做项目的时候，有一个功能就是要求上传的图片要即时显示，很多网站都会有这样的案例，其中的代码逻辑大多为把图片传到服务器上之后，返回图片的 物理路径，不过，我们当时使用的框架为ExtJS 4.1,而且因为涉及一些安全原因，图片在上传过程中，服务器上不能出现任何明文，所以在当时做项目的过程中，所有的数据包括文本文件、图片等一律保存到 了Oracle中。接下来开始把此功能梳理一下。

实现逻辑：
1：首先，要实现ajax上传文件的功能；
2：将上传的文件保存至数据库中；
3：ajax返回一个UUID，至前台；
4：前台拿到此UUID后，重新发送图片请求，将数据库中的的字节数据取出，生成图片；

实现方法：
1：因为ajax属于异步请求，要想答到ajax可以上传文件的目的，还需要下载 jquery 的插件 ajaxfileupload.js文件；该js的原理是在上传文件的同时，自动生成一个iframe对象，里面有一个form表单，通过该form表单进行上传文件的功能；
2：后台拿到文件后，通过流的方式，保存至oracle数据库，保存的同时生成一个UUID,该UUID做为保存至数据库中的主键；
3：将该UUID返回到前台；
4：在ajax中，拿到返回的UUID，然后新建一个image html dom document对象,将其中的属性src通过UUID指向该图片的url,即可。

注意：网上好多教程，是把图片的路径以物理形式返回，即类似于src = “http://wwww.pm-road.com/upload/X.pic” ,此种做法是把图片以物理方式存到了服务器上，我这里是把图片存到数据库里面，存储的并非是图片的路径，而是图片的字节码。

以下是部分代码：
至于ajaxfileupload.js如何上传文件到服务器，这里不做过多的代码，网上有很多；
当服务器收到该文件后：

========================保存文件到数据库的代码========================================
File uploadFile = new File();//这里这个uploadFile 就是上传的文件，这里不写路径什么的了。
InputStream is = new FileInputStream(uploadFile);

//blob类型是oracle中自带的一个文件处理类型，其中的session 是hibernate中的
//session,而非是浏览器创建的request、session对象；
//所以此环境是在hibernate中完成；
Blob blob = session.getLobHelper().createBlob(is,0);
//FileDemo 是你自己的一个实体类，该实体类主要用于hibernate的映射关系。
FileDemo demo = new FileDemo();
//该实体类中一个属性，该属性就是Oracle的Blob类型
demo.setFileBlob(blob);
//生成一个随机ID,用于查询该对象
String random = UUID.randomUUID().toString();
demo.setId(random);
//执行hibernate中session的save()方法 ，将该对象保存至数据库；
session.save(demo);
//流用完之后，一定要关闭
is.close();
=====================通过UUID请求数据库中的图片====================================

//前台收到uuid后，再返回给后台
String uuid = request.getParameter(“uuid”);
//通过hibernate 查询已保存的图片
FileDemo image = session.get(uuid);
//将查询出来的BLob转换成inputstream
InputStream is = image.getFileBlob().getBinaryStream();
ServletOutPutStream os = response.getOutPutStream();
byte[] _b = new byte[1024];
int temp = 0;
while((temp = is.read(_b)>0){
os.write(_b,0,temp);
}
is.close();
if(os != null){
os.close()
}
//将代码这样处理之后，就可以，前台就能自动生成图片，不用其它处理

=================文件上传之后，前台拿到UUID后，处理方法 ======================

var uuid = ajaxa得到的uuid;
//使用js 声明一个img dom对象；
var image = “<img src=‘downloadPic.action?uuid=uuid’ />”;
//要即时显示图片的div id,将div中的html 赋值为image对象；就可以自动显示出来
$(“#divid”).html(image);