原文出自: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);
相关推荐
主要是和我文章配套的资源 压缩包中包括 tongji.js··jquery-1.4.1.js··jquery.form.js
多年收集积累的JS、jQuery插件、UI集合(90个),前端学习资料 11款JQuery动画效果的导航菜单‘等资料 15jQueryDemo.rar ...jQuery+php实现ajax文件即时上传.zip jquery下拉竖导航菜单代码.zip jQuery个性网站桌面
2)修正上传图片功能在修改图片的时候切换到水印控制会出现脚本错误的BUG! 3)修正上传媒体文件功能插入FLV时调整播放器高度及宽度失效的BUG! 4)修正控件自带的FLV播放器播放某些视频时画面尺寸不按比例的BUG! 5)修正...
6.5 综合案例分析—用ajax实现新闻点评即时更新 6.5.1 需求分析 6.5.2 效果界面 6.5.3 功能实现 6.5.4 代码分析 6.6 本章小结 第7章 jquery常用插件 7.1 jquery插件概述 7.2 验证插件validate 7.3...
7.10 综合案例分析—使用uploadify插件实现文件上传功能 /232 7.10.1 需求分析/232 7.10.2 效果界面/233 7.10.3 功能实现/234 7.10.4 代码分析/236 7.11 本章小结/241 第8章 jQuery UI插件/242 8.1 认识...
5、Pjax局部加载,Ajax评论无刷新多次提交,Ajax全文即时搜索,G头像缓存,动态Title标题 6、全站自响应图片预览,导航悬浮,滚动微语,访客/博主评论样式区别,访客操作系统、浏览器、IP地址记录… 功能详解...
[新增] 增加后台上传商品图片后可在本地预览的功能 [新增] 在后台上架商品时,可为商品添加配件,配件直接从已有的商品中选取 [去除] 在商品发布方式中去除团购,捆绑及限时抢购,移到网店促销活动中. 客户管理 ...
■建站:模板增加预览功能(PC,iPad,iPhone) ■建站:使用新的编辑器替代ckeditor ■建站:版块数据管理功能(content|image等) ■修复:UEditor编辑器,图片上传Bug ■修复:模型字段,设置为前端不显示时,后台内容管理...
参数值:接收用户上传的服务器端程序URL,默认留空为禁用超链接上传功能,具体使用方法请参考demo8演示文件 注:可使用内置变量:{editorRoot},代表当前编辑器的根路径,例:{editorRoot}upload.php upLinkExt:...
8.6 即时访问网络图片文件展示 8.7 手机气象局,实时卫星云图 8.8 通过网络播放mp3 8.9 设置远程下载音乐为手机铃声 8.10 远程下载桌面背景图案 8.11 将手机文件上传至网站服务器 8.12 移动博客发布器 8.13 移动RSS...
8.6 即时访问网络图片文件展示 8.7 手机气象局,实时卫星云图 8.8 通过网络播放mp3 8.9 设置远程下载音乐为手机铃声 8.10 远程下载桌面背景图案 8.11 将手机文件上传至网站服务器 8.12 移动博客发布器 8.13 移动RSS...
8.6 即时访问网络图片文件展示 8.7 手机气象局,实时卫星云图 8.8 通过网络播放mp3 8.9 设置远程下载音乐为手机铃声 8.10 远程下载桌面背景图案 8.11 将手机文件上传至网站服务器 8.12 移动博客发布器 8.13 移动RSS...
8.6 即时访问网络图片文件展示 8.7 手机气象局,实时卫星云图 8.8 通过网络播放mp3 8.9 设置远程下载音乐为手机铃声 8.10 远程下载桌面背景图案 8.11 将手机文件上传至网站服务器 8.12 移动博客发布器 8.13 移动RSS...
8.广告管理中广告编辑,加入上传本地图片到编辑器中功能 9.纠正内容页图文排版时,后台设置图片间距无效bug 10.纠正后台采集结果预览,列表小图为绝对路径时没显示出来的BUG 11.整合5.14~11.4的更新包 2011年11月4...