文档章节

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

p
 pm-road
发布于 2014/12/17 14:55
字数 1005
阅读 298
收藏 1

 

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

本文转载自:http://rqlipeng.iteye.com/blog/2150122

p
粉丝 6
博文 69
码字总数 638
作品 0
海淀
私信 提问
PHP之微信JSSDK图片上传预览下载到服务器

1.投票报名 主要实现报名功能 (1)form表单布局 3.微信JSSDK图片上传功能 3.1 jssdk.php jsapiticket.php accesstoken.php 放在项目文件下 3.2获取wx.config所需要的信息 页面中添加如下代码...

bengozhong
2016/11/03
2.4K
0
(转载学习)文件上传的渐进式增强

本文为转载学习 原文作者:阮一峰 原文链接:http://www.ruanyifeng.com/blog/2012/08/fileupload.html HTML5提供了一系列新的浏览器API,使得文件上传有可能出现革命性变化。英国程序员Rem...

heroShane
2014/01/24
48
0
javascript实现图片伪异步上传

实现逻辑 首先要知道, ajax无法发送带有文件的post请求所以,所以还是要用同步的方式,但是刷新的时候,我们不要在原来的页面刷新,去一个隐藏的iframe里面刷新,form表单中action正常填写处...

rand
2018/08/27
0
0
基于Spring mvc注解实现图片上传预览效果

如题: Spring jquery ajax json实现图片上传预览 在保存功能。 到底用那种方法比较常用呢,大家在做项目时都是怎样搞的呢? 给些思路呗、上传把图片保存在项目根目录下,还是发布目录下,要...

zerohh
2013/03/17
3K
3
Ajax在线文件管理--SFBrowser

SFBrowser是一个开源的应用程序基于PHP与jQuery开发,拥有一个漂亮的Ajax界面来在线管理文件。 除了能够展示文件和文件夹功能外,还可以上传、删除、重命名和预览文件。上传可以通过Ajax或F...

匿名
2008/09/19
2.8K
1

没有更多内容

加载失败,请刷新页面

加载更多

代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
今天
5
0
学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
今天
8
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
12
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
16
0
Linux 内核的五大创新

在科技行业,创新这个词几乎和革命一样到处泛滥,所以很难将那些夸张的东西与真正令人振奋的东西区分开来。Linux内核被称为创新,但它又被称为现代计算中最大的奇迹,一个微观世界中的庞然大...

阮鹏
昨天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部