ajax异步上传图片文件并将其转换为base64格式
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格式相关推荐
- 将文件转换为Base64格式
本人水平有限,如有错误,欢迎指正. 将文件转换为Base64格式 function TForm1.EncodeFile(const FileName: string): AnsiString; var ...
- input元素选择图片,并转换为base64格式在img标签显示
#input元素选择图片,并转换为base64格式在img标签显示 <body><input type="file"><img src="& ...
- php+打开图片二进制文件,php图片文件、二进制流、base64格式相互转化
1,php 图片文件.二进制流.base64格式相互转化$image = 'E:/www/logo.png'; //图片文件地址 $type = getimagesize($image)['mime ...
- jq ajax异步上传图片插件,jQuery异步上传文件插件ajaxFileUpload详细介绍
一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数 ...
- python读取txt文件并将其转换为Dataframe格式
对'LogiReg_data.txt'中的数据进行逻辑回归分析.完成下列工作: 读取数据并转换为DataFrame格式,将第一列的列标签设置为'参数1',第二列的列标签设置为'参数2',第三列的列标签 ...
- python处理点云数据_python将指定点云文件(asc)转换为PCD格式
起因 由于自己大部分的点云文件都是.asc格式的,但最近用pcl做点云方面的研究,从asc文件到pcd文件手动转化太麻烦,而且效率较低,故此写一个不太成熟的python脚本实现从asc文件到pcd格式 ...
- 使用Js将图片转换为base64格式-在线示例
图片转base64-在线工具 <!Doctype html> <html><head><meta charset="utf-8" /> ...
- thinkPHP利用ajax异步上传图片并显示、删除
近来学习tp5的过程中,项目中有个发帖功能,选择主题图片.如下: 利用原始的文件上传处理,虽然通过原始js语句能实时显示上传图片,但是这样的话会涉及很多兼容问题.使用ajax技术,实现选择性删除所选图 ...
- jqueryForm 异步上传图片文件
首先是HTML格式: <li><span>上传:</span><div class="loginInput"><div cla ...
最新文章
- [20190402]对比_mutex_wait_scheme不同模式cpu消耗.txt
- 微信小程序——收起和查看更多功能
- 【数据竞赛】席卷Kaggle的调参神器,NN和树模型通吃!
- Google发布Anthos:Google背书,宣告多集群多云Kubernetes时代已来
- JS之ES6扩展运算符三个点(...)用于剥离{} 获取属性值
- MSP432P401R TI Drivers 库函数学习笔记(五)PWM
- 电脑手写板_点到之处妙笔生花,实用平板电脑手写电容笔推荐
- docker 安装 mysql 并映射数据库存放路径及配置文件
- Python入门-行和缩进
- Linux内核分析:recv、recvfrom、recvmsg函数实现
- java 学习笔记之AtomicInteger类的使用
- python爬虫怎么写多线程_Python爬虫4.1 — threading(多线程)用法教程
- Django Rest framework实现流程
- OpenCV-图像处理(32、点多边形测试)
- Windows10不用任何软件实现手机投屏到电脑
- java l老毕_她被毕福剑一手捧红,还给她牵线煤老板,老毕落难时她的做法超赞...
- 数据库的基本操作习题
- 基于matlab的轴承损伤分析动力学建模仿真
- autojs 如何获取控件的desc_如何使用autojs获取抖音引流脚本用户性别实战教学
- Word中利用字体把文字转换为特殊图案(转)