二进制流的主要编码格式是base64码。可以在网上找一些在线转base64编码的网站进行尝试转换。
例如:http://imgbase64.duoshitong.com/然后通过前端展现和下载。
前端显示二进制流图片(src中放置base64码及二进制流)
<img src="http://dl.ppt123.net/pptbj/201603/2016030410235232.jpg" alt="">
/*
* 提示:该行代码过长,系统自动注释不进行高亮。一键复制会移除系统注释
*
*/
前端下载二进制流文件(herf中放置base64码及二进制流,download后面放置下载后的文件名称,如果有需要可以拼接下载文件名)
<a href="data:text/plain;base64,xOPV5suno6zV4srHvNm7sA==" download="6.txt">下载txt</a>
/*
* 提示:该行代码过长,系统自动注释不进行高亮。一键复制会移除系统注释
* 下载图片
*/
<html>
<head></head>
<body>
<input id="fujian" type="file"/>
</body>
<script> $("#fujian").change(function(){
var reader = new FileReader(); var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)( 2 M = 2097152 B )超过2M上传失败 var file = $("#fujian")[0].files[0]; var imgUrlBase64; if (file) {
//将文件以Data URL形式读入页面 imgUrlBase64 = reader.readAsDataURL(file); console.log(imgUrlBase64); reader.onload = function (e) {
//var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64码部分(可选可不选,需要与后台沟通) if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
alert( '上传失败,请上传不大于2M的图片!'); return; }else{
//执行上传操作 console.log(reader.result); } } } })
前端直接调用接口,将reader.result参数放置到数据库所对应的字段。
后端设计数据库时,对字段需要设计。mysq:longtext、longblob类型。sqlsever:text 类型
因为二进制流字节较长,需要能够存储相关内容。