欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Ajax 实现上传图片即时预览功能 博客分类: ajax上传图片 ajax上传图片ajax图片

程序员文章站 2024-03-14 13:03:10
...

 

原文出自: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);