ajax异步上传图片文件并将其转换为base64格式

高级浏览器上面,可以直接使用html5的FileReader,实现获取上传文件的base64格式,并以字符串形式提交。对于IE9以下的浏览器,就得另想他法。下面是高级浏览器的示例代码。

$('.image').change(function(e) {var target = $(e.target);var file;if(target[0].files && target[0].files[0] ) {file = target[0].files[0];}if(file) {var reader = new FileReader();reader.onload = function(evt){var imgstr = evt.target.result; //这就是base64字符串};     reader.readAsDataURL(file);}
});  

1、ajax异步上传文件

使用了jquery.form插件。该插件的原理,是创建了一个隐藏的iframe,来作为iframe提交文件的跳转地址。将form的target属性设置为该iframe,则返回结果将在iframe中显示。这个过程可以自己实现,也可以借助jquery的form插件实现。下面的代码是借助了插件。
html代码如下。添加了一个按钮,用来做提交测试,也可换为其他触发方式。

<form id="postForm" action= "uploadBack.jsp" method= "post"><ul><li><span>img:</span><input id="img" name="img" type="file" accept=".jpg"></li><li><a href="javascript:void(0);">提交</a></li></ul>
</form>

js代码如下。成功和失败方法可以自行定义。

$('a').click(function() {var options = {dataType: 'json',success: getResult,error: showError}$('#postForm').ajaxSubmit(options);
});

2、服务端接收2进制图片
直接从服务端读取输入流,得到的并不是仅仅是图片流,还夹杂了其他信息。如果获取图片流,需要先将其他信息去掉。下面是代码,可以将获取的图片流输出到本地,存为一张相同的图片。

ServletInputStream  in = request.getInputStream();
int result;
OutputStream out = new FileOutputStream("E:/TEST/2.jpg");
byte[] buffer = new byte[1024];
result = in.readLine(buffer,0,buffer.length); //读取boundary
result = in.readLine(buffer,0,buffer.length); //读取Content-Disposition
result = in.readLine(buffer,0,buffer.length); //读取Content-Type;
result = in.readLine(buffer,0,buffer.length); //读取空行;
int length = -1;
while ((length = in.read(buffer)) != -1) {out.write(buffer, 0, length);
}
in.close();
out.close();

3、将2进制图片流转为base64格式字符串
2进制流先存入byte[]数组,然后利用sun.misc.BASE64Encoder包即可转成。将流存入数组时,中途遇到没有读取完整的数据,从而使得得到的字符串不是完整的图片,后又换为循环读取,才得到视觉无损图。另外,得到的base字符串中,可能含有换行等特殊符号,保险起见,处理一下。代码如下,变量接上段代码。

ByteArrayOutputStream outstream = new ByteArrayOutputStream();
byte[] buff = new byte[100]; //buff用于存放循环读取的临时数据
int rc = 0;
while ((rc = in.read(buff, 0, 100)) > 0) { outstream.write(buff, 0, rc);
}
byte[] data = outstream.toByteArray();
in.close();
BASE64Encoder encoder = new sun.misc.BASE64Encoder();
String base64str = encoder.encodeBuffer(data).trim();
base64str = base64str.replaceAll("[\\t\\n\\r]", "");

总结一下,感觉脑子长时间不用,就是有点秀逗了,人也懒了,解决问题的周期也变长了,以后还得勤动脑勤动手。另外,谷歌果然比百度好用太多。

转载地址:http://www.cnblogs.com/newyear/p/6001493.html

ajax异步上传图片文件并将其转换为base64格式相关推荐

  1. 将文件转换为Base64格式

    本人水平有限,如有错误,欢迎指正. 将文件转换为Base64格式 function TForm1.EncodeFile(const FileName: string): AnsiString; var ...

  2. input元素选择图片,并转换为base64格式在img标签显示

    #input元素选择图片,并转换为base64格式在img标签显示 <body><input type="file"><img src="& ...

  3. php+打开图片二进制文件,php图片文件、二进制流、base64格式相互转化

    1,php 图片文件.二进制流.base64格式相互转化$image = 'E:/www/logo.png';  //图片文件地址 $type = getimagesize($image)['mime ...

  4. jq ajax异步上传图片插件,jQuery异步上传文件插件ajaxFileUpload详细介绍

    一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数 ...

  5. python读取txt文件并将其转换为Dataframe格式

    对'LogiReg_data.txt'中的数据进行逻辑回归分析.完成下列工作: 读取数据并转换为DataFrame格式,将第一列的列标签设置为'参数1',第二列的列标签设置为'参数2',第三列的列标签 ...

  6. python处理点云数据_python将指定点云文件(asc)转换为PCD格式

    起因 由于自己大部分的点云文件都是.asc格式的,但最近用pcl做点云方面的研究,从asc文件到pcd文件手动转化太麻烦,而且效率较低,故此写一个不太成熟的python脚本实现从asc文件到pcd格式 ...

  7. 使用Js将图片转换为base64格式-在线示例

    图片转base64-在线工具 <!Doctype html> <html><head><meta charset="utf-8" /> ...

  8. thinkPHP利用ajax异步上传图片并显示、删除

    近来学习tp5的过程中,项目中有个发帖功能,选择主题图片.如下: 利用原始的文件上传处理,虽然通过原始js语句能实时显示上传图片,但是这样的话会涉及很多兼容问题.使用ajax技术,实现选择性删除所选图 ...

  9. jqueryForm 异步上传图片文件

    首先是HTML格式: <li><span>上传:</span><div class="loginInput"><div cla ...

最新文章

  1. [20190402]对比_mutex_wait_scheme不同模式cpu消耗.txt
  2. 微信小程序——收起和查看更多功能
  3. 【数据竞赛】席卷Kaggle的调参神器,NN和树模型通吃!
  4. Google发布Anthos:Google背书,宣告多集群多云Kubernetes时代已来
  5. JS之ES6扩展运算符三个点(...)用于剥离{} 获取属性值
  6. MSP432P401R TI Drivers 库函数学习笔记(五)PWM
  7. 电脑手写板_点到之处妙笔生花,实用平板电脑手写电容笔推荐
  8. docker 安装 mysql 并映射数据库存放路径及配置文件
  9. Python入门-行和缩进
  10. Linux内核分析:recv、recvfrom、recvmsg函数实现
  11. java 学习笔记之AtomicInteger类的使用
  12. python爬虫怎么写多线程_Python爬虫4.1 — threading(多线程)用法教程
  13. Django Rest framework实现流程
  14. OpenCV-图像处理(32、点多边形测试)
  15. Windows10不用任何软件实现手机投屏到电脑
  16. java l老毕_她被毕福剑一手捧红,还给她牵线煤老板,老毕落难时她的做法超赞...
  17. 数据库的基本操作习题
  18. 基于matlab的轴承损伤分析动力学建模仿真
  19. autojs 如何获取控件的desc_如何使用autojs获取抖音引流脚本用户性别实战教学
  20. Word中利用字体把文字转换为特殊图案(转)

热门文章

  1. chromecast 协议_因此,您刚刚获得了Chromecast。 怎么办?
  2. 服务器升级微信公告,【更新公告】8月6日先锋服务器停服更新公告
  3. Latex带序号的项目符号列表
  4. 如何搜集你想要的信息
  5. 计算机每次关机需要配置,电脑一键关机怎么设置 电脑关机一步到位设置教程...
  6. LOGO设计的五大原则
  7. Unity让物体跟随鼠标移动
  8. Windows如何强制关闭电脑全部代理
  9. uos命令_UOS新手入门:键盘和语言的设置方法
  10. 【Python】使用Scikit-Learn进行机器学习步骤介绍