图片上传-本地图片转base64+ie8支持+本地预览支持
最近项目由于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支持+本地预览支持的更多相关文章
- 图片上传jQuery插件(兼容IE8)
图片上传jQuery插件(兼容IE8) 代码来源 :https://github.com/zilan93/uploadImg html <!DOCTYPE html> <ht ...
- ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64)
ASP.NET Core 简单实现七牛图片上传(FormData 和 Base64) 七牛图片上传 SDK(.NET 版本):https://developer.qiniu.com/kodo/sdk/ ...
- 在线HTML文档编辑器使用入门之图片上传与图片管理的实现
在线HTML文档编辑器使用入门之图片上传与图片管理的实现: 官方网址: http://kindeditor.net/demo.php 开发步骤: 1.开发中只需要导入选中的文件(通常在 webapp ...
- 图片上传前 压缩,base64图片压缩 Exif.js处理ios拍照倒置等问题
曾写过在前端把图片按比例压缩不失真上传服务器的前端和后台,可惜没有及时做总结保留代码,只记得js利用了base64位压缩和Exif.js进行图片处理,还有其中让我头疼的ios拍照上传后会倒置等诸多问题 ...
- MVC微信浏览器图片上传(img转Base64)
因公司业务需要,需要做一个微信公众号里的图片上传功能,主要用到的技术就是 img转base64 上到服务器 话不多说, 贴代码 先看前端显示出来的东西 OK 图片不重要,看代码 <!--微信图片 ...
- 【antd Vue】封装upload图片上传组件(返回Base64)
最近需要把上传的图片信息存储到数据库,以base64的方式,需要重新封装一下antd的upload组件 1. 使用方法 引入组件然后配置一下即可使用,配置项包括 defaultImageList,需要 ...
- easyui+webuploader+ckeditor实现插件式多图片上传-添加图片权限(图片上传人是谁,只能看到自己的图片)
需求: 实现过程及思路 1.先页面布局 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=" ...
- IOS 图片上传处理 图片压缩 图片处理
- (void)initActionSheet { UIActionSheet *actionSheet = [[UIActionSheet alloc] initWithTitle:nil dele ...
- 解决uploadify多图片上传部分图片丢失,且不提示任何错误的问题
这两天用到uploadify的flash版本进行批量图片上传并生成缩略图的功能,之前用uploadify用的好好的,这次突然出现了一个奇怪的问题. 问题描述如下:当我选择单个图片上传的时候,图片上传都 ...
- ssm使用Ajax的formData进行异步图片上传返回图片路径,并限制格式和大小
之前整理过SSM的文件上传,这次直接用代码了. 前台页面和js //form表单 <form id= "uploadForm" enctype="multipart ...
随机推荐
- AWK Demo
AWK is so poweful. AWK功能太强大了: @1:处理格式化文本(感觉主要还是以这个为主) @2:对文本逐行进行处理(过滤某些行,保留符合条件的) @3:将文件根据不同的条件分成多个文 ...
- docker学习笔记2--对镜像/容器的命令操作
Docker启动一个Centos镜像 我们下载完成一个Centos镜像之后,开始启动 docker run -d -i -t <imageID> /bin/bash 这样就能启动一个一直停 ...
- 前端之 Ajax(补)
概述 对于WEB应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用 一个简单操作需要 ...
- .ssh中的文件的分别意义
当我们在用户的主目录使用如下命令: cd (进入个人主目录,默认为/home/hadoop) ssh-keygen -t rsa -P '' (注:最后是二个单引号) 表示在用户的主目录创建ssh登陆 ...
- rsh命令配置于使用
安装环境:一台centos6.10虚拟机,一台centos7.5虚拟机,全部使用root用户登录. 两台机器上都要安装rsh.rsh-server.xinetd包. 两台机器都要关闭防火墙并配置/et ...
- IMX6Q RTC驱动分析
对于在工作中学习驱动的,讲究的是先使用,再理解.好吧,我们来看看板子里是如何注册的? 在板文件里,它的注册函数是这样的: imx6q_add_imx_snvs_rtc() 好吧,让我们追踪下去: 1 ...
- linux 挂载 smb
smbmount //192.168.1.210/homes/dm8168 /opt/fedora/ -o username=psubo,password=psubo_smb
- Dual Boot WINDOWS 10 and KALI LINUX Easily STEP BY STEP GUIDE截图
mark. kali安装:https://www.youtube.com/watch?v=KLj2yQPWZDk 删除无用分区:http://www.xitongcheng.com/jiaocheng ...
- verilog FAQ(zz)
1. What is the race condition in verilog? Ans :The situation when two expressions are allowed to exe ...
- C# 利用TTS实现文本转语音
TSS(Text To Speech),语音朗读文本的技术,在Windows下台下,微软给我们提供了一套API接口(Speech API).金山词霸的朗读功能就是用的这个接口. WindowsXP自带 ...