图片FormData上传
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上传的更多相关文章
- 使用FormData上传文件、图片
关于FormData XMLHttpRequest Level 2添加了一个新的接口 ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XM ...
- HTML5可预览多图片ajax上传(使用formData传递数据)
HTML5可预览多图片ajax上传(使用formData传递数据) 在介绍上传图片之前,我们简单的来了解下FormData的基本使用:介绍完成后这些基本知识后,我们会在文章最后提供一个demo,就是a ...
- 三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)
涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为 ...
- Html5+asp.net mvc 图片压缩上传
在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法 ...
- PHP使用七牛云存储之图片的上传、下载、303重定向教程,CI框架实例
网上关于七牛云存储的教程除了官网上的API文档,其他的资料太少了.研究了下API之后,现在已经能实现图片的上传和下载及上传之后的重定向. http://blog.csdn.net/cqcre/arti ...
- ios中摄像头/相册获取图片,压缩图片,上传服务器方法总结
相册 iphone的相册包含摄像头胶卷+用户计算机同步的部分照片.用户可以通过UIImagePickerController类提供的交互对话框来从相册中选择图像.但是,注意:相册中的图片机器路径无法直 ...
- asp.net+swfupload 多图片批量上传(附源码下载)
asp.net的文件上传都是单个文件上传方式,无法执行一次性多张图片批量上传操作,要实现多图片批量上传需要借助于flash,通过flash选取多个图片(文件),然后再通过后端服务进行上传操作. 本次教 ...
- HTML5 Canvas前台压缩图片并上传到服务器
1.前台代码: <input id="fileOne" type="file" /> <input id="btnOne" ...
- iOS分享 - AFNetworking之多图片/文件上传
在分享经验之前,先说点题外话,之前的一个项目涉及到了多图片的上传,本来以为是一个很简单的事情,却着实困扰了我好久,究其原因,一是我不够细心,二是与后台人员的交流不够充分.在此,我想将我的老师常说的一句 ...
随机推荐
- Cisco AP-格式化AP
故障情况:APC11-AP04#sho capwap ip config LWAPP Static IP ConfigurationIP Address 172.17.239.204I ...
- 树莓派4B踩坑指南 - (7)root账户及权限设置
树莓派启用root账户 树莓派默认用户是pi 密码为raspberry. root账户默认无密码,但是账户锁定. 开启root账户命令: sudo passwd root #执行后提示设置密码,输入2 ...
- encypt dataset
import getoptimport sysimport uuidimport hashlibimport csvdef getIds(totals,encrypt): seed=set() for ...
- 记一次RocketMQ源码导入IDEA过程
首先,下载源码,可以官网下载source包,也可以从GitHub上直接拉下来导入IDEA.如果是官网下载的source zip包,直接作为当前project的module导入,这里不赘述太多,只强调一 ...
- static关键字的作用是什么?
static的作用:常用来修饰变量. 全局变量被static修饰后,就称之为静态全局变量:局部变量被static修饰后,就称之为静态局部变量.统称为静态变量. 如果需要进一步解释下面的现象,可以了解i ...
- Qt5.5 使用smtp发邮件的各种坑
本人刚开始学习C++,用的是Qt5.5的IED,经过了两天的学习和查找资料,终于成功发了第一封邮件.以163邮箱为例,简单总结一下. 1.设置邮箱 这一步比较关键,要开通smtp服务,在开通的过程中会 ...
- 第1节 Scala基础语法:13、list集合的定义和操作;16、set集合;17、map集合
list.+:5 , list.::5: 在list集合头部添加单个元素5 : li1.:+(5):在list集合尾部添加单个元素5: li1++li2,li1:::li2:在li1集合尾部添加il2 ...
- [POI 2014]PTA-Little Bird
Description 题库连接 给你 \(n\) 棵树,第 \(i\) 棵树的高度为 \(d_i\).有一只鸟从 1 号树出发,每次飞跃不能超过 \(k\) 的距离.若飞到下一棵树的高度大于等于这一 ...
- Python内置模块-logging
一.初识logging模块 import logging logging.debug("debug message") #级别最低,只有在诊断问题时才有兴趣的详细信息. loggi ...
- Python 基础之if if else
1.代码块 以冒号作为开始,用缩进来划分区域,这个整体叫做代码块 if 5 == 5: print(1) print(2) if True: print(3) print(4) ...