最近项目由于flash同学没在了,图片上传只能前端重新做,后台希望用base64数据上传,复用之前接口

问题来了,

1.ie8 不支持canvas转base64

2.本地预览 base64数据,ie8仅能显示32k数据

3.本地图片如何显示预览

4.base64数据如何换算成文件大小

 
//ie转换方法canvas转base64
function ieBase64(file){//file是input type="file" 对象dom
var realPath, xmlHttp, xml_dom, tmpNode, imgData;
realPath = file;//获取文件的真实本地路径.
xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
xmlHttp.open("POST",realPath, false);
xmlHttp.send("");
xml_dom = new ActiveXObject("MSXML2.DOMDocument");
tmpNode = xml_dom.createElement("tmpNode");
tmpNode.dataType = "bin.base64";
tmpNode.nodeTypedValue = xmlHttp.responseBody;
imgData = "data:image/"+ "bmp" +";base64," + tmpNode.text.replace(/\n/g,"");
//计算文件大小
var str=imgData.substring(22);
var equalIndex= str.indexOf('=');
if(str.indexOf('=')>0){
str=str.substring(0, equalIndex);
}
var strLength=str.length;
var fileLength=parseInt(strLength-(strLength/8)*2);
if(fileLength > 5120000){//图片大于5M
alert("图片不能大于5M");
return;
}
callback(imgData);
//return imgData;//渲染图片
}

本地预览 base64数据,ie8仅能显示32k数据

本地图片如何显示预览

var url;
if (navigator.userAgent.indexOf("MSIE")>=1) { // IE >6 imgFile 是input type="file" 对象dom
url = imgFile.value;
}else{
url = window.URL.createObjectURL(imgFile.files.item(0));
}
$("#pic2").attr("src",url);//ie8浏览器 base64仅显示32k数据,这里用本地地址显示。。。等ajax执行完成,这里被替换
});

base64数据如何换算成文件大小

//计算文件大小
var str=imgData.substring(22);
var equalIndex= str.indexOf('=');
if(str.indexOf('=')>0){
str=str.substring(0, equalIndex);
}
var strLength=str.length;
var fileLength=parseInt(strLength-(strLength/8)*2);
if(fileLength > 5120000){//图片大于5M
alert("图片不能大于5M");
return;
}

代码下载:https://files.cnblogs.com/files/zhidong123/img-to-base64-ie8.rar

图片上传-本地图片转base64+ie8支持+本地预览支持的更多相关文章

  1. 图片上传jQuery插件(兼容IE8)

      图片上传jQuery插件(兼容IE8) 代码来源 :https://github.com/zilan93/uploadImg   html <!DOCTYPE html> <ht ...

  2. ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64)

    ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64) 七牛图片上传 SDK(.NET 版本):https://developer.qiniu.com/kodo/sdk/ ...

  3. 在线HTML文档编辑器使用入门之图片上传与图片管理的实现

    在线HTML文档编辑器使用入门之图片上传与图片管理的实现: 官方网址: http://kindeditor.net/demo.php 开发步骤: 1.开发中只需要导入选中的文件(通常在 webapp ...

  4. 图片上传前 压缩,base64图片压缩 Exif.js处理ios拍照倒置等问题

    曾写过在前端把图片按比例压缩不失真上传服务器的前端和后台,可惜没有及时做总结保留代码,只记得js利用了base64位压缩和Exif.js进行图片处理,还有其中让我头疼的ios拍照上传后会倒置等诸多问题 ...

  5. MVC微信浏览器图片上传(img转Base64)

    因公司业务需要,需要做一个微信公众号里的图片上传功能,主要用到的技术就是 img转base64 上到服务器 话不多说, 贴代码 先看前端显示出来的东西 OK 图片不重要,看代码 <!--微信图片 ...

  6. 【antd Vue】封装upload图片上传组件(返回Base64)

    最近需要把上传的图片信息存储到数据库,以base64的方式,需要重新封装一下antd的upload组件 1. 使用方法 引入组件然后配置一下即可使用,配置项包括 defaultImageList,需要 ...

  7. easyui+webuploader+ckeditor实现插件式多图片上传-添加图片权限(图片上传人是谁,只能看到自己的图片)

    需求: 实现过程及思路 1.先页面布局 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=" ...

  8. IOS 图片上传处理 图片压缩 图片处理

    - (void)initActionSheet { UIActionSheet *actionSheet = [[UIActionSheet alloc] initWithTitle:nil dele ...

  9. 解决uploadify多图片上传部分图片丢失,且不提示任何错误的问题

    这两天用到uploadify的flash版本进行批量图片上传并生成缩略图的功能,之前用uploadify用的好好的,这次突然出现了一个奇怪的问题. 问题描述如下:当我选择单个图片上传的时候,图片上传都 ...

  10. ssm使用Ajax的formData进行异步图片上传返回图片路径,并限制格式和大小

    之前整理过SSM的文件上传,这次直接用代码了. 前台页面和js //form表单 <form id= "uploadForm" enctype="multipart ...

随机推荐

  1. Python基础(16)_面向对象程序设计(类、继承、派生、组合、接口)

    一.面向过程程序设计与面向对象程序设计 面向过程的程序设计:核心是过程,过程就解决问题的步骤,基于该思想设计程序就像是在设计一条流水线,是一种机械式的思维方式 优点:复杂的问题的简单化,流程化 缺点: ...

  2. php 跨域 form提交 2种方法

    出于安全因素考虑,直接跨域访问是不允许的,下面介绍二种跨域的方法. 一,通过php curl function curlPost($url,$params) { $postData = ''; for ...

  3. Git版本控制系统VCS

    Git版本控制系统VCS 一.版本控制系统基本情况说明 版本控制是一种记录一个或者若干个文件内容的变化,以便将来查阅特定版本修订情况的系统 1.作用 记录文件的所有历史变化 随时可回复到任何一个历史状 ...

  4. Linux Shell编程 sed命令

    概述 sed 是一种几乎可以应用在所有 UNIX 平台(包括 Linux)上的轻量级流编辑器,体积小.所以,它可以对从如管道这样的标准输入中接收的数据进行编辑. sed 主要是用来将数据进行选取.替换 ...

  5. java中类名.class, class.forName(), getClass()区别

    Class对象的生成方式如下: 1.类名.class           说明: JVM将使用类装载器, 将类装入内存(前提是:类还没有装入内存),不做类的初始化工作.返回Class的对象 2.Cla ...

  6. js 和 jquery 里面几个获取宽高的调查

    罗列下 js 和 jquery 里面获取宽高的方法: obj.offsetWidth = $obj.outerWidth()  // offsetWidth obj.clientWidth = obj ...

  7. awk中打印连续多列,或者删除多列的技巧

    问题:比如有一个文件是20列,你只要后面的18列,怎么打印. 方法:把第一列和第二列做空:用print打印 [wangjq@mgmt humandb]$ cat test 1 2 3 4 5 6 7 ...

  8. Linux与Android 多点触摸协议【转】

    本文转载自:http://blog.csdn.net/xubin341719/article/details/7833277 一.Linux与Android 多点触摸协议 为了使用功能强大的多点触控设 ...

  9. IDEA: 遇到问题Error during artifact deployment. See server log for details.详解

    IDEA 的配置确实有些烦人,完整的配置我之前发过,现在有个著名的报错: Error during artifact deployment. See server log for details. 这 ...

  10. Whitewidow:SQL 漏洞自动扫描工具

    Whitewidow 是一个开源的 SQL 漏洞自动扫描器,可用通过文件列表运行,或者从 Google 爬取并发现有潜在漏洞的网站. 这个工具支持自动格式化文件.随机用户代理.IP 地址.服务器信息. ...