var base64String = /*base64图片串*/;

//这里对base64串进行操作,去掉url头,并转换为byte
var bytes = window.atob(base64String.split(',')[1]); //处理异常,将ASCII码小于0的转换为大于0,这里有两种写法
第一种:
var ab = new ArrayBuffer(bytes.length);
var ia = new Uint8Array(ab);
for(var i = 0; i < bytes.length; i++){
ia[i] = bytes.charCodeAt(i); //这里有点疑惑,ia是怎么改变ab的?注:①
}
//Blob对象
var blob = new Blob([ab], {type: 'image/jpeg'}); //type为图片的格式 //FormData对象
var fd = new FormData();
//TDOD Ajax或者其他方式上传FormData对象 //FormData对象接受三个参数,第三个参数为文件名,通常我们只传前两个参数,第三个参数不传则使用默认文件名,这里使用的Blob对象,所以需要一个文件名,用时间戳代替。
fd.append('file',blob, Date.now() + '.jpg');
第二种:
var array = [];
for(var i = 0; i < bytes.length; i++){
array.push(bytes.charCodeAt(i));
}
var blob = new Blob([new Uint8Array(array)], {type: 'image/jpeg'});
var fd = new FormData();
fd.append('file',blob, Date.now() + '.jpg');
//TDOD Ajax或者其他方式上传FormData对象

原理:利用ArrayBuffer、Blob和FormData进行图片上传

图片FormData上传的更多相关文章

  1. 使用FormData上传文件、图片

    关于FormData XMLHttpRequest Level 2添加了一个新的接口  ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XM ...

  2. HTML5可预览多图片ajax上传(使用formData传递数据)

    HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...

  3. 三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)

    涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为 ...

  4. Html5+asp.net mvc 图片压缩上传

    在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法 ...

  5. PHP使用七牛云存储之图片的上传、下载、303重定向教程,CI框架实例

    网上关于七牛云存储的教程除了官网上的API文档,其他的资料太少了.研究了下API之后,现在已经能实现图片的上传和下载及上传之后的重定向. http://blog.csdn.net/cqcre/arti ...

  6. ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结

    相册 iphone的相册包含摄像头胶卷+用户计算机同步的部分照片.用户可以通过UIImagePickerController类提供的交互对话框来从相册中选择图像.但是,注意:相册中的图片机器路径无法直 ...

  7. asp.net+swfupload 多图片批量上传(附源码下载)

    asp.net的文件上传都是单个文件上传方式,无法执行一次性多张图片批量上传操作,要实现多图片批量上传需要借助于flash,通过flash选取多个图片(文件),然后再通过后端服务进行上传操作. 本次教 ...

  8. HTML5 Canvas前台压缩图片并上传到服务器

    1.前台代码: <input id="fileOne" type="file" /> <input id="btnOne" ...

  9. iOS分享 - AFNetworking之多图片/文件上传

    在分享经验之前,先说点题外话,之前的一个项目涉及到了多图片的上传,本来以为是一个很简单的事情,却着实困扰了我好久,究其原因,一是我不够细心,二是与后台人员的交流不够充分.在此,我想将我的老师常说的一句 ...

随机推荐

  1. 【转载】Eclipse 最常用快捷键 (动画讲解),最简单的一些快捷键

    Eclipse有强大的编辑功能, 工欲善其事,必先利其器, 掌握Eclipse快捷键,可以大大提高工作效率. 小坦克我花了一整天时间, 精选了一些常用的快捷键操作,并且精心录制了动画, 让你一看就会. ...

  2. MySQL自动备份实战--xtrabackup备份

    MySQL数据备份企业实战.制作shell脚本 功能1:使用xtrabackup以每周为一个备份周期做备份(数据库+二进制日志,备份至本地/data/backup).提示: 周一某个时间点做一次完全备 ...

  3. 解决:mui 的 选项卡 + 下拉刷新 功能,在其中嵌入 iframe 后,在 iphone 的情况下,iframe 的内容不能滚动,只显示第一屏内容。

    我所遇到的情况是,使用 mui 的 选项卡 + 下拉刷新 功能时,其中有2个页面是嵌入了别的网站的页面,而别个几个是通过 ajax 加载本网站的数据.然后 在其中嵌入 iframe 后,在 iphon ...

  4. python知识点总结以及15道题的解析

    先看知识点总结 一.序列操作符x in s 如果x是列表s的元素,返回True,否则Falses + t 连接两个序列s和ts*n或者n*s 将序列s复制n次s[i] 返回s中第i元素s[i:j]或s ...

  5. 1123. Lowest Common Ancestor of Deepest Leaves

    link to problem Description: Given a rooted binary tree, return the lowest common ancestor of its de ...

  6. 从零构建以太坊(Ethereum)智能合约到项目实战——第21章 搭建联盟链

    P78 .1-内容介绍 什么情况下建立自己测试用的PoA chain? 公司内网或无对外网络,无法同步区块 降低测试时等待区块的时间 不想碰到testrpc各种雷 PoA chain特点有 有别于Po ...

  7. [蓝桥杯2016初赛]卡片换位 BFS

    题目描述 你玩过华容道的游戏吗?这是个类似的,但更简单的游戏.看下面 3 x 2 的格子 +---+---+---+ | A | * | * | +---+---+---+ | B | | * | + ...

  8. js缓慢滑块

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. java记录3--异常

    异常的分类 1.Error 由java虚拟机生成并抛出,包括动态链接失败,虚拟机错误等等,JAVA程序无法对此错误 try { //可能出现异常的代码块 } catch(exception1 ) { ...

  10. hexo 安装和部署

    因为投递论文需要个人网站,所以今天又来了一次hexo 安装和部署. 参考官方文档:https://hexo.io/zh-cn/docs/ git是需要的哈.自行安装 node需要大于8.10 node ...