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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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]", "");

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




以上是关于ajax异步上传图片文件并将其转换为base64格式的主要内容,如果未能解决你的问题,请参考以下文章

将图片转换为Base64编码的字符串

如何使用ajax发送大图像或其base64字符串?

如何将 Firebase 上传图片的图片下载 URL 转换为 base64

上传图片转换格式为base64并预览

前端将图片转换为base64位,使用ajax传递到后台,但是图片经过base64转换成字符串后非常长,无法使用ajax

上传图片文件转换成blob