如何用Ajax加载服务器的图片
用Ajax请求服务器的图片,并显示在浏览器中
前言
一直在数据库里面存的都是图片在服务器的地址,然后再到浏览器中显示,但是发现两个问题
第一:为了安全起见,js是无法读取本地的图片的,不然你写一个js,岂不是可以获取任何人电脑里面的文件了。
第二:图片存在的是在服务器的硬盘上面,而不是在客户的硬盘里面,所以也是取不到的
后来在网上找方法,找的方法,都是各种转换二进制到xml中,的各种高大上的答案,然后本人又实在太懒了,就自己想了一个方法,就是利用BufferedImage这个类。
开始
首先说说我的思路,就是把本地的图片,加载到内存中,然后放到BufferedImage这个缓冲流中,然后利用ImageIO.write(),这下大家都估计想得到一种思路了,但是如果说ajax,得到的数据,估计还是啥个乱七八糟的啥吧!没关系,稍后介绍。
工具类
首先建立一个加载图片的工类具,把一个图片的地址当参数存进去,得到这个图片的缓冲流:
/**
* 根据图片的地址,返回图片的缓冲流
* @param addr
* @return
*/
public static BufferedImage getInputStream(String addr){
try {
String imgPath = addr;
BufferedImage image = ImageIO.read(new FileInputStream(imgPath));
return image;
} catch (Exception e) {
e.printStackTrace();
System.out.println();
System.out.println("获取图片异常:java.awt.image.BufferedImage");
System.out.println("请检查图片路径是否正确,或者该地址是否为一个图片");
}
return null;
}
没错,就是使用ImageIO.read,来加载流对象,然后就是处理类的代码了,这是我用的是springMVC,springMVC这段时间比较火,所以我也好少用struts2了
处理类
/**
* 根据图片的地址,来获取图片
* @param addr
* @param response
*/
@ResponseBody
@RequestMapping("/getImg")
public void getImg(@Param("addr")String addr,HttpServletResponse response){
BufferedImage img = new BufferedImage(300, 150, BufferedImage.TYPE_INT_RGB);
img = ImgUtil.getInputStream(addr);
if(img==null){
throw new RuntimeException("打印图片异常:com.controller.Business_Ctrl.getImg(String, HttpServletResponse)");
}
if(img!=null){
try {
ImageIO.write(img, "JPEG", response.getOutputStream());
} catch (IOException e) {
e.printStackTrace();
System.out.println("打印异常:com.controller.Business_Ctrl.getImg(String, HttpServletResponse)");
}
}
}
很明显,使用ImageIO.read()读到图片时,就用ImageIO.write(),输出图片,输入流就是HttpServletResponse.getOutputStream()
客户端
function setImg(addr){
$("#logo").attr("src","business/getImg?addr="+addr+"");
}
如图所示,当需要加载图片的时候,就触发setImg方法,给它一个地址,当然,地址,早已经从后台传到前台了,自然,就算没有地址,稍微变一下,也可以在后台得到地址,然后返回,然后给img标签设置src属性,就可以得到图片了。
如何用Ajax加载服务器的图片的更多相关文章
- jQuery-瀑布流-绝对定位布局(二)(延迟AJAX加载图片)
jQuery-瀑布流-绝对定位布局(二)(延迟AJAX加载图片) 瀑布流-绝对定位布局,与浮动布局的区别在于 1.布局不一样: 绝对定位:一个UL里面放置所有的绝对定位的LI: 浮动布局:多个(一 ...
- 使用ajax()方法加载服务器数据
使用ajax()方法加载服务器数据 使用ajax()方法是最底层.功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值,它的调用格式如下: jQuery.a ...
- 如何在启用SharePoint浏览器功能的InfoPath 表单中添加托管代码以动态地加载并显示图片
InfoPath 的浏览器表单不支持加载并显示图片,当然在模板中可以插入图片,但是如果想显示数据库的一幅图片,或是动态加载一张图片就无能为力了. 基实这个问题可以通过在浏览器表单中使用: " ...
- 转载:Flash AS3.0 加载外部资源(图片,MP3,SWF)的两种方式
Flash AS3.0 加载外部资源(图片,MP3,SWF)的两种方式 出自:http://www.cnblogs.com/top5/archive/2012/08/04/2623464.html 关 ...
- jQuery Mobile 手动显示ajax加载器,提示加载中...
在使用jQuery Mobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:一个旋转图片+一个提示:加载中...).这个时候,我们可以手动显示jQuery Mobile的加载器,大 ...
- iOS网络编程(三) 异步加载及缓存图片---->SDWebImage
@SDWebImage提供一个UIImageView的类别以支持加载来自网络的远程图片.具有缓存管理.异步下载.同一个URL下载次数控制和优化等特征. @SDWebImage的导入1.https:// ...
- 关于SDWebImage加载高清图片导致app崩溃的问题
链接是对于SDWebImage的使用方法 http://www.cnblogs.com/JimmyBright/p/4457258.html 使用SDWebImage加载高清图片的时候,往往会报内存溢 ...
- 商城项目:商品列表ajax加载,ajax加入购物车--五张表的联合查询
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ProductLists.a ...
- ajax加载菊花loading效果
Ajax异步请求的时候,一般都会利用一个动态的gif小图片来制作一个Ajax Loading,以便增加用户体验. 这里我们可以使用Spin.js,该js脚本压缩后5k,可以不用任何图片,任何外部CSS ...
随机推荐
- linux-14基础命令之-复制(cp)移动(mv),删除(rm),拷贝文件(dd)
1.cp 命令用于复制文件或者目录 格式为:cp[选项]源文件 目标文件 复制名录有三种情况: @1.目标文件是一个目录,将源复制到该目录下: @2.目标文件是一个文件,将源文件覆盖该文件: @3 ...
- 记一次troubleshooting(一):奇慢的脚本
背景: 事情发生的时间是几年前,那时刚从windows server运维的部门调动过来,对linux和数据库还是处于一知半解的状态. 领导找过来说:前任遗留下来的问题你来调查一下,有个客户说他们的日次 ...
- 快速学习C语言四: 造轮子,ArrayList
高级语言里的列表是最常用的数据结构,在C里造个轮子玩玩,C没有泛型,先用int练习. Collection的ADT一般有hasnext,next,add, remove操作,List一般还加了remo ...
- Redis 系列 (一) StackExchange.Redis的使用
一.DLL安装 用NuGet搜索StackExchange.Redis,然后下载就可以. ConnectionMultiplexer对象是StackExchange.Redis最中枢的对象.这个类的实 ...
- Java设计模式3:工厂方法模式
工厂方法模式 工厂方法模式是类的创建模式.工厂方法模式的用意是定义一个创建产品对象的工厂接口,将实际创建工厂推迟到子类中. 工厂方法模式 工厂方法模式是对简单工厂模式进一步抽象的结果. 假如是不使用反 ...
- 设计模式之美:Memento(备忘录)
索引 意图 结构 参与者 适用性 效果 相关模式 实现 实现方式(一):Memento 模式结构样式代码. 别名 Token 意图 在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这 ...
- 规范化的软件项目演进管理--从 Github 使用说起
规范化的软件项目演进管理 从 Github 使用说起 1 前言 首先,本文的层次定位是:很基本很基础的 Github 工具的入门级应用,写给入门级的用户看的. 基本上工作过几年的人,下面描述的这些 ...
- 团队项目——站立会议DAY12
第十二次站立会议记录: 参会人员:张靖颜,钟灵毓秀,何玥,赵莹,王梓萱 项目进展: 1.张靖颜:已经将部分代码完成,对一些模块化的功能进行扩展,对已具备的功能进行完善. 2.钟灵毓秀:对代码进行了修改 ...
- sublime 2/3 for mac link to command
Sublime command for mac : execute those command: subl 2: sudo ln -s /Applications/Sublime\ Text\ 2.a ...
- .NET轻量级MVC框架:Nancy入门教程(一)——初识Nancy
当我们要接到一个新的项目的时候,我们第一时间想到的是用微软的MVC框架,但是你是否想过微软的MVC是不是有点笨重?我们这个项目用MVC是不是有点大材小用?有没有可以替代MVC的东西呢?看到这里也许你会 ...