首页 > 代码库 > Ajax 实现上传图片即时预览功能

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

本文为原创,转载请注明:http://www.pm-road.com/index.php/2014/07/31/50

很多网站在上传头像或照片的时候,都会有一个预览功能,结合自身体验将该功能实现一下;要求:图片保存到数据库点击查看实现ajax上传图片即时预览另一种方法(简单方法)
之前,我在做项目的时候,有一个功能就是要求上传的图片要即时显示,很多网站都会有这样的案例,其中的代码逻辑大多为把图片传到服务器上之后,返回图片的物理路径,不过,我们当时使用的框架为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://www.mamicode.com/“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=http://www.mamicode.com/‘downloadPic.action?uuid=uuid’ />”;
//要即时显示图片的div id,将div中的html 赋值为image对象;就可以自动显示出来
$(“#divid”).html(image);

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